logo标签列表

使用jQuery移除被拖动的元素并重置光标

jquerymouse-cursordroppable
4

我在使用jQuery进行拖放操作时遇到问题。以下是一个非常简单的fiddle示例，展示了我的问题（http://jsfiddle.net/Znt44/1/）：

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

正如您所看到的，我在拖动时将光标设置为十字线，这很有效。

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

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

应该如何正确地重置光标？

或者remove函数有问题吗？

1
将 $('#drop').css('cursor', 'auto'); 添加到 drop 函数中将重置光标，但我认为这不是正确的方法。 - avh
我尝试使用开发者工具，并发现光标样式确实附加到了body元素上！这使得在可拖动或可放置的元素上设置光标的一些解决方法变得无用。肯定有其他方法可以做到这一点... - avh
1
到目前为止最好的解决方法是：$('body').css('cursor', 'auto')。 - avh
3个回答
3
在我的情况下，我注意到拖动操作会在我的父元素上强制使用 style="cursor:move"。因此，在拖放方法的末尾，我强制将其设置为 style="cursor:auto"（我的父元素是 <body>）。
$('body').css('cursor', 'auto');
2

我认为“光标”样式附加到主体上是因为“层”的问题。在我的页面中，我使用JQuery应用于当前拖动对象的类的样式来解决相同的问题：

 .ui-draggable-dragging { cursor:move}

在这种情况下（在您的JSFiddle测试用例中），您可以注意到当您拖动时悬停在可放置元素上时，光标是最高z位置元素之一。
尝试更改顺序。
<div id="drag">drag me!</div>
<div id="drop"></div>

to

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

你可以使用 zIndex 属性来控制 .draggable() 的层叠顺序，这样你就能看到区别了。

如果在你的实际情况中适用的话，我认为这是一个比在 body 元素上重置光标更加 具体 的好替代方案。

0

尝试在您的可放置区上添加cursor: auto：

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

我已经编辑了你的fiddle。

这似乎不起作用。如果再次激活删除，则光标仍未重置。 - avh
谢谢，但我看不到它起作用。我查看了jQuery UI文档，没有找到droppable小部件的cursor属性。这对你真的有效吗？（http://api.jqueryui.com/droppable/） - avh
对不起，我使用Chrome浏览器尝试了多次，换成火狐浏览器后出现相同的结果：在拖放后移动到红框上时，光标会被卡住在十字形状态。 - avh
在删除之后，我也遇到了光标无法正确变回的问题。这里的答案似乎没有任何效果。 - Hades
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接