jQuery：如何更新可拖动克隆的ID？

Question

我想在可排序列表中添加可拖动项目，在我的示例http://jsbin.com/ipese5/35中，这个功能很好用。

问题是我想在拖到可排序列表时更新克隆项目的id。奇怪的是，以下代码会在ui对象中将id更新为“new-id”（我可以在控制台中看到），但实际页面html中的id没有更改。有人有解决方法吗？

$( "#init .block" ).draggable({
  helper: "clone",
  connectToSortable: ".list"
});

$(".list").sortable({
  connectWith: ".list",
  receive: function(event, ui) {
    $(ui.helper).attr("id","new-id");
    console.log(ui); 

    // surprisingly the next line works fine, but is not neccesary
    // $(ui.item).attr("id","new-id");
  }
});

<div id="init">
  <div id="new" class="block">Drag me</div>
  <div id="new" class="block">Drag me</div>
  <div id="new" class="block">Drag me</div>
</div>

<div class="list">
  <div class="block">Sort me</div>
  <div class="block">Sort me</div>
</div>

- Huub

Answer 1

在receive事件中，您无法访问正在创建的可排序列表中的实际项。Helper指向仅用于拖动的克隆项，而item是您单击以拖动的原始项。

但是，在 beforeStop 事件之前会触发beforeStop事件。在beforeStop中，item实际上是要添加到列表中的项目。因此，在beforeStop中，您可以保存该项目，然后在接收中使用它。

演示在这里：http://jsfiddle.net/kcg29/

var newItem;

$(".list").sortable({
  connectWith: ".list",
  beforeStop: function (event, ui) { 
      newItem = ui.item;
  },
  receive: function(event,ui) {
      $(newItem).doSomething();
  }
});​

- James Montagne

---

这是正确的。更完整的解释应该是，ui.item 是被插入的元素，而 ui.helper 是你可拖动元素上的 helper，它仍然保留着原始属性。 - Gabriel Hurley

Answer 2

这很简单，但有效：

$( '#init .block' ).draggable({
        connectToSortable: ".list",
        helper: "clone",
        start: function(event,ui){
            //get ID form draggable item 
            itemId = $(this).attr('id');
        },
        stop: function(event,ui){
            //assign ID to clone
            ui.helper.attr('id',itemId);
        }
    });

$(".list").sortable({
  connectWith: ".list",
});

- Jansen