jQuery可排序，我如何獲得拖動元素的id？

Question

在jQuery 2.1.4 + jQuery UI 1.11.4中有這樣的代碼，我如何獲得拖動元素的id？

$("#form").sortable({ 
    placeholder: "ui-state-highlight", 
    update: function(event, ui) { 
     //I WANNA GET DRAGGED ITEM ID HERE 
    } 
}).disableSelection(); 

請點擊這裏查看例如： https://jsfiddle.net/u8r3b2nw/1/

PD：我已經搜查這裏，但沒有爲我工作。謝謝。

Answer 1

看起來id被刪除時，該項目被放在表中。我找到了一個解決方法，但它非常混亂。我希望別人能爲你提供更好的解決方案。

https://jsfiddle.net/mark_c/u8r3b2nw/4/

$(document).ready(function() { 

    // Store the id in this scope 
    var id; 

    $(".item").draggable({ 
     helper: "clone", 
     revert: "invalid", 
     cursor: "move", 
     cursorAt: { 
      top: 20, 
      left: 56 
     }, 
     connectToSortable: '#form', 

     // On drag start store the element's id. 
     start: function() { 
      id = this.id; 
     } 
    }); 

    $("#form").sortable({ 
     placeholder: "ui-state-highlight", 
     update: function(event, ui) { 

      // If the item doesn't have an id add it from the stored value. 
      // Length check makes sure it isn't overwritten. 

      if (!ui.item[0].id.length) { 
       ui.item[0].id = id; 
      } 

      // Alert the id of the sorted element 
      alert(ui.item[0].id); 

     }, 
    }).disableSelection(); 
}); 

Answer 2

因爲你克隆拖動的元素和id必須通過獨特的，它就會從克隆刪除。如果可以使用其他屬性，例如data-id，則應該可以使用ui.item.attr('data-id')輕鬆訪問。

但是，當使用receive事件時，我得到了id，但它只在拖動期間觸發，而不是排序。

$("#form").sortable({ 
    placeholder: "ui-state-highlight", 
    receive: function(event, ui) { 
     console.log(ui.item.attr('id')); 
    } 
}).disableSelection(); 

另一個解決方法是將其移動到那些draggable

$(".item").draggable({ 
    helper: "clone", 
    revert: "invalid", 
    cursor: "move", cursorAt: { top: 20, left: 56 }, 
    connectToSortable: '#form', 
    stop: function(event, ui) { 
    console.log($(event.target).attr('id')); 
    } 
}); 

希望一個會爲你工作。