jQuery Sortable() 带有原始位置占位符？

Question

有没有办法让 jQuery 可排序列表显示一个占位符，用于在您拖出一个项目进行排序时显示初始项目的位置？

即当用户要移动列表中的某个 LI 时，我需要一个矩形轮廓来显示他们正在拖动的 LI 的来源。

Answer 1

简短版本:您可以使用 sortable 的 start 事件处理程序来显示原始项目，并根据需要修改其外观。例如:

$(listOfStuff).sortable({
  start: function (e, ui) { 
    ui.item.show().addClass('original-placeholder');
  });

通过上述操作，当用户开始拖动时，原始项目不会消失，而是会保持其原始位置，并且获得“原始占位符”。

发生了什么事(据我所知):

• start 函数在用户开始拖动时运行。
• 当用户开始拖动时，原始项目实际上并没有移动，它只是被隐藏了。 (ui.helper 是用户拖动的单独对象)。通过调用 ui.item.show()，您可以将其显示出来。 (嗯，从技术上讲，它会被隐藏，然后立即取消隐藏，但我看不到任何闪烁。)
• 然后你可以根据自己的喜好修改 ui.item 。在上面的示例中，我刚刚添加了一个类，但您可以替换其内部 HTML 等。

我对内部原理不是特别熟悉，但我想其他人可能能够更多地说明人们可以将这项技术推向多远。