jQuery Sortable()与原始位置占位符?

有没有办法让jQuery可排序列表显示一个占位符,当你拖出一个排序时,初始项是什么?

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

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

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

有了上述内容,当用户开始拖动时,不是原始项目消失,而是保持其原始位置,它将获得“原始占位符”。

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

  • 用户开始拖动时会运行startfunction。
  • 当用户开始拖动时,原始项目实际上没有移动,它只是隐藏。 (ui.helper是用户拖动的单独对象)。 通过调用ui.item.show(),你可以保持透露。 (好吧,从技术上讲,它会被隐藏,然后立即被隐藏,但我看不到任何闪烁。)
  • 然后你可以根据自己的内容修改ui.item。 在上面的例子中,我刚刚添加了一个类,但您可以替换其内部HTML等。

我对内部人员并不是特别熟悉,但我想其他人可能会更多地说出可以推动这种技术的程度。

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

我不确定我是否可以将代码排除在我的头顶之外,但基本上,当正在运行的可排序函数时,它会在实际DOM中上下移动其他列表项,因此,例如,如果你将第3个列表项的css设置为具有虚线边框,如果列表项像疯狂一样移动则无关紧要,因为无论哪个滑入该点都将是第3个列表项并因此获得虚线边框。

你不能做的是当用户移动东西(我不相信)时让插槽保持空置,因为列表项目不会在视觉上腾出空间。 基本上当您拖动项目时,DOM正在调整以向下滑动缺失列表项目的位置…