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属性，因此您应该使用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"));
    }
});

Answer 2

保持我找到的id的唯一方法是添加一个droppable和这段代码：

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

这里有一个小提琴（必须有更好的方法）http://jsfiddle.net/MdZwB/1/

jQuery中的助手功能 - 可拖动

2 个答案: