使用 jQuery 删除拖动的元素并重置光标答案

【问题标题】：Remove a dragged element and reset cursor with jQuery使用 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'
});

如您所见，我在拖动时将光标设置为十字准线，这很有效。

如果您将绿色框放在红色框上，光标将不会重置。看起来光标也附在红色框上，并且没有重置。

如果您将绿色框放在其他任何位置，则光标会完美重置。

重置光标的正确方法是什么？

还是删除有问题？

【问题讨论】：

【解决方案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 再次尝试，结果相同：在放置后移到红色框上时，光标卡在十字准线上。
我也遇到了这个问题，因为光标没有正确变回。这里的答案似乎没有任何效果。