jquery UI sortable：如何让原始可见直到下降？

Posted 2023-05-08

【中文标题】jquery UI sortable：如何让原始可见直到下降？

【英文标题】：jquery UI sortable: how to leave the original visible until the drop?

【发布时间】：2011-01-10 03:02:06

【问题描述】：

在http://jqueryui.com/demos/sortable/ 演示的标准行为中，当您在列表中拖动一个项目时，将在该项目将被放置的位置显示一个占位符元素。

但是，没有指明要丢弃的物品的原始位置。

我想让原始位置在放置之前一直可见，以便视觉反馈类似于 http://jqueryui.com/demos/draggable/#visual-feedback 中描述的“半透明克隆”选项保留原始位置的方式

有什么办法可以用 sortable 做到这一点？

谢谢！

【参考方案1】：

因此，一种似乎有效的方法（认为这绝对是一种 hack）是传递选项

start: function (e, ui) ui.item.show();

取消隐藏自动隐藏的原件 (ui.item)。

而且，更一般地说，可以使用start 函数来修改项目。

【讨论】：

谢谢。这对我也有帮助

但它在下降时消失了

不错。我还最终在开始时添加了一个类，并在停止时将其删除。然后我设置 css 类的不透明度。我发现这有助于说明哪一个是原始项目。

【参考方案2】：

helper: 'clone' 选项将保留您的原始项目，同时创建一个实际由鼠标拖动的新 DOM 元素。 （此外，您可以使用选项opacity: 0.7 在助手上创建“半透明”效果。）

我不确定您是否需要这个，但如果使用克隆不会自动从列表中删除该项目，您可以使用remove 事件删除从列表中拖出的项目完全 DOM。

【讨论】：

所以，这就是我认为应该使用“克隆”发生的事情——但是当我设置助手时：“克隆”原件仍然消失。所以也许我应该问：我会错过什么？

仔细看一下，使用“克隆”该项目仍然出现在 DOM 中。但它不显示。我修改了 jquery-ui 包附带的示例以使用helper: 'clone' 选项，您可以在此处查看：brahn.sqprod.com/jq/sortable-example.html

而且，事实上（感谢 Firebug）现在很明显（同样，即使使用 clone 选项）通过将样式设置为 display: none 来隐藏原始文件

@brahn link dead : brahn.sqprod.com/jq/sortable-example.html jsfidler 是最好的展示示例 ...