jquery - 使用 jQuery 删除拖动的元素并重置光标

Question

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

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

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

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

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

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

还是删除有问题？

score 3 · Accepted Answer

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

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

score 2 · Accepted Answer

我认为光标样式与“层”有关。我使用 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元素上重置光标，因为它更具体。

score 0 · Accepted Answer

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

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

我已经编辑了你的小提琴。

3 回答 3