jquery-ui，如何将光标恢复为默认值

Question

在我的jquery-ui 中，我有draggable 和droppable 元素。在draggable我已经放了

revert: "invalid",

并将childspan 类设为droppable，

$('.childspan').droppable({
        greedy: true,
        hoverClass: "droppable-in", 
        over: function(event, ui) {
            $(this).css("cursor", "no-drop");
            $(ui.helper).empty();           
        },
        out: function(event, ui) {
            $(this).css("cursor", "default");
            $(ui.helper).append(myimg);         
        },      
    });

一切都很好，但问题是，当我将项目拖到childspan droppable 上时，它会将光标更改为no-drop，当我离开鼠标时它会按预期恢复。但光标不会变回default。

请帮助如何在revert中将光标恢复为默认值。

Answer 1

使用您的 over 和 out，我将添加和删除一个类，以便您可以通过 CSS 而不是通过 .css() 控制光标。

$('.childspan').droppable({
  greedy: true,
  hoverClass: "droppable-in", 
  over: function(event, ui) {
    $(this).addClass("no-drop-cursor");
    $(ui.helper).empty();           
  },
  out: function(event, ui) {
    $(this).removeClass("no-drop-cursor");
    $(ui.helper).append(myimg);         
  }
});

如果由于某种原因你不能这样做，我会改用inherit 或auto。

$(this).css("cursor", "auto");

此外，这将取决于仍在调用哪个事件。 out 说：

当接受的可拖动对象被拖出可放置对象时触发（基于tolerance 选项）。¹

如果您仍在拖拽区域，over 仍会被触发。

还要记住这一点：

注意：ui 对象为空，但包含在内是为了与其他事件保持一致。¹

这意味着$(ui.helper) 不包含对象并且不能附加到。您是否在控制台中看到此错误？

¹Droppable Widget API