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。

请帮助如何在还原时将光标恢复为默认值。

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说：

将可接受的拖动器拖出droppable时触发（基于tolerance选项）。¹

如果您仍在拖放区域，则仍会触发over。

还要记住：

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

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

¹ Droppable Widget API

jquery-ui，如何将光标还原为默认值

1 个答案: