jquery 可排序，可拖动到垃圾桶对象

Posted 2023-05-08

【中文标题】jquery 可排序，可拖动到垃圾桶对象

【英文标题】：jquery sortable, draggable onto a trash can object

【发布时间】：2012-03-27 07:05:32

【问题描述】：

当我将可分类、可拖动的项目放在垃圾桶对象上时，我遇到了问题。 代码在这个 jsfiddle 中。 http://jsfiddle.net/queeg/sRAmW/1/

在 jsfiddle 中重现问题真的很容易：

将“面包”拖到可排序的A“ “sortableA”框会展开以允许项目适合。

将“面包”拖到“垃圾桶” 垃圾桶将展开以接受该项目，然后该项目消失。

将“bread”从“sortableA”拖到“Trash can” 问题会自己显现。垃圾桶不会展开，并且项目会在淡出之前跳转到其他位置。

【参考方案1】：

一种可能的解决方案是在将 position: absolute 拖放到垃圾桶时从可拖动对象中删除：

var element = ui.draggable.css('position', '');

DEMO

当来自 #sortableX 元素时，它们应用了这个 css 规则，但不直接来自两个列表之一。

【讨论】：

是的，这似乎很好地解决了问题。我非常感谢。

不客气。真是奇怪的行为，肯定有原因，但仍然无法弄清楚。

我注意到了一些事情。当项目从“sortableA”拖到垃圾桶时，一个空槽是可见的。它一直可见，直到该项目消失在垃圾桶中。是否有某种方法可以在拖放后立即将拖动的项目从发件人容器中分离出来？

我用这个回答了那部分： var element = ui.draggable.css('position', ''); var clone = element.clone(); clone.appendTo(this); element.remove(); clone.fadeOut(1000);

【参考方案2】：

调用$('#sortable, #sortable2').droppable(); 似乎可以解决问题。见here。

【讨论】：

差不多。但是当从“sortableA”中删除时，垃圾桶不会像从列表中删除时那样略微扩展。

【参考方案3】：

那是因为您试图在 ul 中附加一个 ul 元素，这不是有效的 html，而且由于样式（左，上）在您将其拖放到垃圾箱后没有正确定位显示好像它没有正确拖入垃圾箱。

我已经修好了，看看

http://jsfiddle.net/ShankarSangoli/sRAmW/3/

【讨论】：

感谢您的帮助。在您的 jsfiddle 中，项目不能再从“sortableA”拖到垃圾桶，这是错误的功能。