使用 jQuery 删除拖动的元素并重置光标
Posted
技术标签:
【中文标题】使用 jQuery 删除拖动的元素并重置光标【英文标题】：Remove a dragged element and reset cursor with jQuery 【发布时间】：2013-05-03 20:02:16 【问题描述】：我在使用 jQuery 拖放时遇到问题。这是一个非常简单的小提琴，说明了我的意思（http://jsfiddle.net/Znt44/1/）：
$('#drop').droppable(
drop: function (e, ui)
ui.draggable.remove();
);
$('#drag').draggable(
cursor: 'move'
);
如您所见，我在拖动时将光标设置为十字准线，这很有效。
如果您将绿色框放在红色框上，光标将不会重置。看起来光标也附在红色框上，并且没有重置。
如果您将绿色框放在其他任何位置，则光标会完美重置。
重置光标的正确方法是什么？
还是删除有问题？
【问题讨论】：
将$('#drop').css('cursor', 'auto'); 添加到 drop 函数将重置光标，但我认为这不是正确的做法。
我用开发者工具试了一下，发现光标样式确实附加到了body元素上！这使得一些解决方法将光标设置在可拖动或可放置无用。必须有其他方法可以做到这一点......
目前最好的解决方法：$('body').css('cursor', 'auto')
【参考方案1】：
在我的例子中，我注意到在拖动它时会在我的父元素上强制style="cursor:move"。
所以我在 drop 方法的末尾强制style="cursor:auto"（我的父元素是<body>）：
$('body').css('cursor', 'auto');
【讨论】：
【参考方案2】：我认为 cursor 样式附加到 body 是为了“层”。 我使用 JQuery 应用于 当前拖动的对象的类的样式在我的页面中解决了同样的问题：
.ui-draggable-dragging cursor:move
在这种情况下（在您的 JSFiddle 测试用例中），您会注意到，当您将鼠标悬停在可放置元素上时，光标是 z 位置最高的元素之一。
尝试改变顺序
<div id="drag">drag me!</div>
<div id="drop"></div>
到
<div id="drop"></div>
<div id="drag">drag me!</div>
你看到了不同。 或者您可以使用 .draggable() 的 zIndex 属性。
如果它适用于您的实际情况，我认为它可能是一个很好的替代解决方案，而不是在 body 元素上重置光标，因为它更 具体。
【讨论】：
【参考方案3】：尝试在您的 droppable 上添加 cursor: auto：
$('#drop').droppable(
cursor: 'auto',
drop: function (e, ui)
ui.draggable.remove();
);
$('#drag').draggable(
cursor: 'move'
);
我已经编辑了你的fiddle。
【讨论】：
这似乎不起作用。如果再次激活删除，光标仍未重置。 谢谢，但我看不到它工作。我查看了 jQuery UI 文档，并没有在那里找到可放置小部件的光标属性。这真的对你有用吗？ (api.jqueryui.com/droppable) 抱歉，我用 Chrome 并用 FF 再次尝试，结果相同：在放置后移到红色框上时，光标卡在十字准线上。 我也遇到了这个问题，因为光标没有正确变回。这里的答案似乎没有任何效果。以上是关于使用 jQuery 删除拖动的元素并重置光标的主要内容，如果未能解决你的问题，请参考以下文章