jquery：如何更新可拖动的克隆 ID？答案

【问题标题】：jquery: how to update draggable clone id?jquery：如何更新可拖动的克隆 ID？
【发布时间】：2011-08-12 21:40:02
【问题描述】：

我想将可拖动的项目添加到可排序列表中，这在我在 http://jsbin.com/ipese5/35 上的示例中可以正常工作

问题是我想在拖动到可排序列表时更新克隆项目的 id。奇怪的是，以下代码将 de 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>

【问题讨论】：

标签： jquery jquery-ui jquery-ui-sortable jquery-ui-draggable

【解决方案1】：

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

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

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

var newItem;

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

【讨论】：

这是正确的。更完整地指出 ui.item 是要插入的项目，ui.helper 是您的可拖动对象的助手，它仍然具有原始属性。

【解决方案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",
});

【讨论】：