Question

使用jQuery拖放时遇到问题。这是一个非常简单的小提琴，显示了我的意思（http://jsfiddle.net/Znt44/1/）：

$('#drop').droppable({
    drop: function (e, ui) {
        ui.draggable.remove();
    }
});
$('#drag').draggable({
    cursor: 'move'
});

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

如果您将红色框上的绿色框放下，光标将不会重置。看起来光标也连接到红色框，并且没有重置。

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

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

或者删除有什么问题吗？

Answer 1

就我而言，我注意到在拖动它时会强制style="cursor:move"在我的父元素上。所以我在drop方法结束时强制style="cursor:auto"（我的父元素是<body>）：

$('body').css('cursor', 'auto');

Answer 2

我认为 cursor 样式是附加到body的“layer”。我使用JQuery应用于当前拖动的对象的类的样式在我的页面中解决了同样的问题：

 .ui-draggable-dragging { cursor:move}

在这种情况下（在你的JSFiddle测试用例中）你可以注意到当你的拖动悬停在droppable元素上时，光标是最高的z位置元素之一。

尝试更改

的顺序

<div id="drag">drag me!</div>
<div id="drop"></div>

到

<div id="drop"></div>
<div id="drag">drag me!</div>

你看到了区别。或者您可以使用.draggable（）的 zIndex 属性。

如果你的实际案例很合适，我认为它可以是一个很好的替代解决方案，而不是重置 body 元素上的游标，因为它更具有特定的。

Answer 3

尝试在您的droppable上添加cursor: auto：

$('#drop').droppable({
cursor: 'auto',
drop: function (e, ui) {
    ui.draggable.remove();
 }
});
$('#drag').draggable({
    cursor: 'move'
});

我已修改了您的fiddle。