Jquery Sortable – 替换项而不是交换项

是否有任何可配置的选项来实现更换列表项而不是交换JQuery Sortable UI中的项目。 当前function类似于Item1与Item2交换，反之亦然。 我需要一个function，如果在Item1上拖放item2，则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

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

现在从第一个框拖到第二个框。 希望这有帮助，如果我错过任何事情，请告诉我，:)

jQuery的

 $(document).ready(function(){ $(".leftDiv .item").draggable({ helper: function(ev, ui) { return ""+$(this).html()+""; }, 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

 
 drag to ==> 
Item 1
 
Item 2
 
Item 3
 
Item 4
 
Item 5
 
Item 6
 
 
 ==> To this 
Item 1
 
Item 2
 
Item 3
 
Item 4
 
Item 5
 
Item 6
  

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}