jquery - jQuery 中的辅助函数 - 可拖动

Question

我正在尝试为 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

Here是 JsBin 上的完整示例(带有 HTML)

Answer 1

您正在设置 dragId helper 元素上的属性，因此您应该使用 ui.helper而不是ui.item :

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

编辑: Nicola Peluchetti 在下面的评论中是正确的:ui.helper确实是null期间stop事件。因为您可能想使用 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"));
    }
});