jQuery中的Helper函数-可拖动

我正在尝试为jQueryUI编写一个

helper

函数，以设置从“可拖动”列表拖动到“可排序”列表的项的属性。（我需要这样做的原因是最新版本的jQueryUI删除了已删除项的“id”属性）

但是，该属性没有进入“可排序”列表。我是否在助手函数中做错了什么

$("#draggable > li").draggable({
  connectToSortable: "#sortable",
  helper: function (event) {
    var id = $(this).attr('id');
    var ret = $(this).clone();
    ret.attr('dragId', id);
    console.log('dragId: ', ret.attr('dragId'));
    return ret();
  }
});

$( "#sortable" ).sortable({
    start: function( event, ui ) {
          console.log( "sortable start: dragId=", ui.item.attr( "dragId" ) );
    },
    stop: function( event, ui ) {
          console.log( "sortable stop: dragId=", ui.item.attr( "dragId" ) );
    }
});

当我将项目从可拖动列表拖动到可排序列表时，它会在控制台中打印：

dragId: itemA
sortable start: dragId= undefined
sortable stop: dragId= undefined

我希望它能打印：

dragId: itemA
sortable start: dragId= itemA
sortable stop: dragId= itemA

---

JsBin上的完整示例（带有HTML）是否是保留我找到的id的唯一方法是添加一个可拖放项，代码如下：

    $( "#sortable" ).droppable({
        drop: function( event, ui ) {
            $(ui.draggable).attr('id', $(ui.helper).attr('id'));
        }
    });

---

这里有一把小提琴（一定有更好的方法）

您正在设置helper元素的

dragId

属性，因此应该使用

ui.helper

而不是

ui.item

：

console.log("sortable start: dragId=", ui.helper.attr("dragId"));

EDIT:Nicola Peluchetti在下面的评论中是正确的：

ui.helper

在

stop

事件期间将确实是

null

。由于您可能希望在该事件期间使用

dragId

属性，解决方法是在

start

事件期间复制该属性，此时

ui.helper

和

ui.item

都可用：

$("#sortable").sortable({
    start: function(event, ui) {
          ui.item.attr("dragId", ui.helper.attr("dragId"));
          console.log("sortable start: dragId=", ui.item.attr("dragId"));
    },
    stop: function(event, ui) {
          console.log("sortable stop: dragId=", ui.item.attr("dragId"));
    }
});

---

如果“最新版本的jQueryUI删除了已删除项的'id'属性”是真的，那么将该id保存下来，并在可删除项的删除事件处理程序中重新应用它（您需要添加一个可删除项）。全局变量，li的子变量，任意位置。注意：JsBin示例中的代码略有不同。这里的helper函数的最后一行后面有（），它不应该在那里。您希望返回ret对象，而不是执行它并返回结果。（$not defined）这仅适用于启动函数（而非停止函数）@Nicola，你的意思是助手在

stop

事件期间没有

dragId

属性？没有，我用firebug检查了它，实际上ui.helper在停止函数中为空