jQuery UI拖拽元素触发revert时如何恢复光标为默认样式

这个问题我之前处理过，本质是触发revert: "invalid"回退时，droppable的out事件可能没有被正确触发（比如拖拽元素在droppable区域内松开但触发回退，或者快速拖拽离开导致out事件未执行），导致光标停留在no-drop状态。下面给出两种可靠的解决方法：

方法一：通过Draggable的stop事件全局重置光标 #

在你的draggable初始化代码中添加stop回调，不管拖拽最终是成功放置还是触发回退，都统一重置所有.childspan的光标样式：

$('.your-draggable-element').draggable({
  revert: "invalid",
  stop: function() {
    // 恢复所有droppable元素的光标为默认样式
    $('.childspan').css("cursor", "default");
  }
});

方法二：给Droppable添加deactivate事件处理 #

deactivate事件会在拖拽操作结束时触发（无论是否完成放置），刚好可以用来兜底恢复光标状态。修改你的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); 
    },
    // 添加deactivate事件，拖拽结束时恢复光标
    deactivate: function(event, ui) {
        $(this).css("cursor", "default");
        // 可选：同步恢复helper的内容，避免状态不一致
        $(ui.helper).append(myimg);
    }
});

额外优化建议 #

你可以检查下droppable的accept选项是否配置正确：如果你的draggable元素不被.childspan接受，松开后会触发回退，但此时out事件可能不会触发。如果需要让.childspan仅接受特定拖拽元素，添加accept配置：

$('.childspan').droppable({
    accept: '.target-draggable-class', // 指定接受的拖拽元素选择器
    // 其他原有配置...
});

这样既能明确droppable的接受范围，也能配合上面的方法确保光标状态始终正确。

内容的提问来源于stack exchange，提问作者usersam