Jquery可排序 - 替換項目而不是交換項目

Question

是否有任何可配置選項來實現像替換列表項目而不是在JQuery可排序UI中交換項目之類的功能。當前的功能類似於Item1與Item2交換，反之亦然。我需要一個功能，如果item2被拖放到Item1上，item2應該替換Item1，而Item2的位置將爲空。任何幫助？謝謝。

Answer 1

你好演示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} 

Answer 2

您可以用下面的代碼做到這一點：

$('#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')); 
    } 
});