带有原始位置占位符的jQuery Sortable（）？答案

【问题标题】：jQuery Sortable() with original position placeholder?带有原始位置占位符的jQuery Sortable（）？
【发布时间】：2010-02-05 17:23:26
【问题描述】：

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

即当用户在我的列表中移动其中一个 LI 时，我想要一个矩形轮廓来显示他们拖动的那个来自哪里。

【问题讨论】：

【解决方案1】：

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

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

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

发生了什么（据我所知）：

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

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

【讨论】：

【解决方案2】：

如果你知道被移动的项目的位置，你可以有一个子函数说当 li 处于被拖动状态时，第 n 个 li 有一个虚线边框。

我不确定我能不能把代码从我的脑海中剔除，但基本上，当 sortable 函数运行时，它会在实际 DOM 中上下移动其他列表项，例如，如果您将第三个列表项的 css 设置为具有虚线边框，那么列表项是否像疯了一样移动并不重要，因为无论哪个滑入该位置都将是第三个列表项，从而获得虚线边框.

您不能做的是在用户四处移动东西时让插槽保持空置（我不相信），因为这样列表项在视觉上就没有为放置腾出空间。本质上，当您拖动项目时，正在调整 DOM 以向上滑动丢失的列表项...

【讨论】：