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

Posted 2023-05-08

【中文标题】jquery-ui，如何将光标恢复为默认值

【英文标题】：jquery-ui , how to revert the cursor back to default

【发布时间】：2018-07-06 08:03:58

【问题描述】：

在我的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中将光标恢复为默认值。

【参考方案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

【讨论】：

嗨@Twisty。我正在拖动放置区域，该放置区域对于该项目是不可放置的，然后鼠标单击该区域本身。所以从技术上讲，我并没有“出局”。那么类/光标将如何改变。我认为我们应该只在可拖动的“还原”中处理这个问题。

@sand 很难理解正在发生的操作。如果我理解，您正在拖动一个项目，然后将其放到某个位置。如果项目不应该放在那里，那么应该使用来自可拖动的revert，或者应该从drop回调中返回false。 out 仅在项目仍在被拖动时调用。