jquery - Jquery Sortable - Replacing Items rather than swapping items

Question

Is there any configurable option to achieve the feature like replacing the list items rather than swapping items in JQuery Sortable UI. Current feature is like Item1 Swaps with Item2 and vice versa. I need a feature like, If item2 is dragged and dropped on Item1, item2 should replace Item1 and Item2 position will be empty. Any help? thanks.

Answer 1

您可以使用以下代码执行此操作：

$('#container').sortable({
  connectWith: '#container',
  items: '.children', //#container > .children
  cursor: 'move',
  receive: function(event, ui) {
    var item = $(ui.item);
    var sender = $(ui.sender);
    sender.append(item.siblings('.children'));
  }
});

Answer 2

Hiya演示 http://jsfiddle.net/CZm9C/2/

现在从第一个框拖动到第二个。希望这会有所帮助，如果我错过了什么，请告诉我，:)

jQuery

$(document).ready(function(){
    $(".leftDiv .item").draggable({
        helper: function(ev, ui) {
            return "<span class='helperPick'>"+$(this).html()+"</span>";
        },
        connectToSortable: ".rightDiv"
    });

    $(".rightDiv").sortable({
        'items': ".item",
        'receive': function(event, ui){
            // find the class of the dropped ui, look for the one with the integer suffix.
            var clazz = getClassNameWithNumberSuffix(ui.item);
            $('.leftDiv .' + clazz).draggable( "option", "revert", true )
            if($('.rightDiv .' + clazz).length > 1){
                $('.rightDiv .' + clazz + ':not(:first)').remove();    

            }
            $('.leftDiv .' + clazz).remove();
        }
    });

});

function getClassNameWithNumberSuffix(el) {
  var className = null;
  var regexp = /\w+\d+/;
  $($(el).attr('class').split(' ')).each(function() {
    if (regexp.test(this)) {
      className = this;
      return false;
    }
  });

  return className;
}

HTML

<div class="leftDiv"> drag to ==>
    <div class="item item1">Item 1</div>
    <div class="item item2">Item 2</div>
    <div class="item item3">Item 3</div>
    <div class="item item4">Item 4</div>
    <div class="item item5">Item 5</div>
    <div class="item item6">Item 6</div>
</div>
<div class="rightDiv"> ==> To this
     <div class="item item1">Item 1</div>
    <div class="item item2">Item 2</div>
    <div class="item item3">Item 3</div>
    <div class="item item4">Item 4</div>
    <div class="item item5">Item 5</div>
    <div class="item item6">Item 6</div>
</div>

CSS

.leftDiv, .rightDiv {width:120px; float:left; border:1px solid #000; padding:5px; margin:10px; min-height:130px}
.rightDiv {margin-left:40px}

.item {height:20px; line-height:20px; text-align:center; border:1px solid #EEE; background-color:#FFF}

.helperPick {border:1px dashed red; height:20px; line-height:20px; text-align:center; width:120px}