jquery - Jquery Sortable - アイテムを交換するのではなく、アイテムを交換する

Question

JQuery Sortable UIでアイテムを交換するのではなく、リストアイテムを置き換えるなどの機能を実現するための構成可能なオプションはありますか? 現在の機能は、Item1 が Item2 と交換され、その逆のようなものです。item2がItem1にドラッグアンドドロップされた場合、item2がItem1を置き換え、Item2の位置が空になるような機能が必要です。何か助けはありますか？ありがとう。

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

ひやデモhttp://jsfiddle.net/CZm9C/2/ _

次に、最初のボックスから 2 番目のボックスにドラッグします。これがお役に立てば幸いです。何か見逃した場合はお知らせください:)

Jクエリ

$(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}