Jquery Sortable - 替换项目而不是交换项目答案

【问题标题】：Jquery Sortable - Replacing Items rather than swapping itemsJquery Sortable - 替换项目而不是交换项目
【发布时间】：2012-04-24 01:17:23
【问题描述】：

是否有任何可配置的选项来实现该功能，例如替换列表项而不是在 JQuery 可排序 UI 中交换项目。当前功能类似于 Item1 与 Item2 交换，反之亦然。我需要一个功能，如果将 item2 拖放到 Item1 上，则 item2 应该替换 Item1 并且 Item2 位置将为空。有什么帮助吗？谢谢。

【问题讨论】：

您可以随时绑定拖放事件并自行处理...
使用可拖放而不是可排序可能会更好。
@Brad Christie：我在文档中找不到 Jquery Sortable 的任何拖放事件。你能简要解释一下吗？谢谢

标签： jquery jquery-ui-sortable

【解决方案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'));
  }
});

【讨论】：

【解决方案2】：

嗨演示 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}

【讨论】：

感谢您的代码和帮助。我真的在 Sortable 中寻找这个功能，而不是从连接到 Sortable 列表的可拖动项目中拖动。我能够隐藏占位符并获得替换的感觉，但不幸的是我无法识别要替换的放置位置的索引。放置时，对我来说接收方法本身没有调用。谢谢。