jQuery 中的辅助函数 - 可拖动答案

【问题标题】：Helper function in jQuery - draggablejQuery 中的辅助函数 - 可拖动
【发布时间】：2011-07-19 19:28:36
【问题描述】：

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

【问题讨论】：

如果“最新版本的 jQueryUI 删除了已删除项目的 'id' 属性”是真的，则将 id 保存关闭并在 droppable 的 drop 事件处理程序中重新应用它（您需要添加一个droppable）。
全局变量，li 的子节点，任意位置。
注意：代码在 JsBin 示例中略有不同。这里辅助函数的最后一行后面有 ()，它不应该在那里。您想返回 ret 对象，而不是执行它并返回结果。
jsbin 示例生成错误，不起作用。（$ 未定义）

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

【解决方案1】：

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

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

编辑： 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"));
    }
});

【讨论】：

这仅适用于启动功能（而不是停止功能）
@Nicola，你的意思是在stop 事件期间助手没有dragId 属性？
不，我用萤火虫检查过，实际上 ui.helper 在停止函数中为空

【解决方案2】：

保留我找到的 id 的唯一方法是添加一个 droppable 和以下代码：

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

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

【讨论】：