jQuery UI的connectToSortable如何進入下降元素ATTR的

Question

我使用連接到一個排序列表，當一個項目被丟棄到排序列表似乎不正確克隆原來這主要是運作良好，除了一個jQuery UI拖動列表元素ID或任何關聯的jquery數據（）。

奇怪的是，這些東西可以從接收函數內部獲得，但它似乎並沒有真正將它們保存到元素中，所以像可排序列表的更新函數一樣，不會正確地看到新的丟棄元素，因爲新的li元素不會正確地「真的有一個ID。

我在做什麼錯？

的Javascript：

$(document).ready(function() { 
    $("#dest").sortable({ 
     update : function() { 
      onUpdate(); 
     }, 
     receive: function(event, ui) { 
      alert("dropped item ID: "+ui.item.attr('id')); 
     } 
    }); 

    jQuery('#src > li').draggable({helper:'clone',connectToSortable:'#dest'}); 
}); 

function onUpdate() { 
    var order = $('#dest').sortable('toArray'); 
    var txt = "Order: "+order; 

    $("#info").text(txt); 


} 

HTML：

Source List (dragable): 
<div> 
    <ul id="src"> 
     <li id="src_0">src 0</li> 
     <li id="src_1">src 1</li> 
     <li id="src_2">src 2</li> 
    </ul> 
</div> 

Target List (sortable): 
<div> 
    <ul id="dest"> 
     <li id="dest_0">dest 0</li> 
     <li id="dest_1">dest 1</li> 
     <li id="dest_2">dest 2</li> 
    </ul> 
</div> 

<span id="info"> 
    Waiting update... 
</span> 

演示在http://jsfiddle.net/h3WJH/1/

Answer 1

我相信jQuery不會故意的，因爲一個ID是爲了識別頁面上的一個元素。嘗試使用$.data()來存儲信息。

檢查了這一點：http://jsfiddle.net/wngchng87/h3WJH/11/

Answer 2

我有同樣的問題，並沒有找到一個很好的方式做到這一點，卻得到了一個解決方法。

原始的元素可以「接收」事件acessed，但不能更新。我做了以下內容：

var droppedId; 
    myList.sortable({ 
     receive: function(e, ui) { 
      droppedId = ui.item.data('id'); 

     }, 
     update: function(e, ui) { 
      ui.item.data('id', droppedId); 
     }, 
    }) 

商品ID無法通過ui.item訪問，但它可在ui.sender.attr（「ID」），因此，如果您使用元素的ID，而不是數據，你可以做：

var droppedId; 
    myList.sortable({ 
     receive: function(e, ui) { 
      droppedId = ui.sender.attr('id'); 

     }, 
     update: function(e, ui) { 
      ui.item.attr('id', droppedId); 
     }, 
    }) 

儘管重複ID似乎不是一個好主意。