jQuery:如何更新可拖动克隆ID? [英] jquery: how to update draggable clone id?

问题描述

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

I want to add draggable items to a sortable list, which works fine in my example on http://jsbin.com/ipese5/35

问题是当我拖动到可排序列表时，我想更新克隆项的ID. 奇怪的是，以下代码将de ui对象中的id更新为"new-id"(正如我在控制台中看到的那样)，但是在实际的HTML页面上ID并未更改.有人有解决方案吗?

Problem is that I want to update id of the cloned item when dragged to the sortable list. Strange thing is that the following code updates the id to "new-id" in de ui object (as I can see in my console), but the id is not changed on the actual page html. Anyone has a solution?

$( "#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>

推荐答案

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

In the receive event, you cannot access the actual item that is being created in the sortable list. Helper points to a clone that is used just for the dragging, item is the original item that you clicked on to drag.

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

But, the beforeStop event fires just before the receive event. In beforeStop, the item is actually the item being added to the list. So, in beforeStop you can save the item and then use it in receive.

此处演示: http://jsfiddle.net/kcg29/

var newItem;

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

这篇关于jQuery:如何更新可拖动克隆ID?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！