Question

我有一个很明显的问题/任务，我仍然想知道为什么我找不到解决方案......

在使用jQuery UI的JavaScript应用程序中，我使用draggable()和droppable() API来移动元素。这是直接的，正如预期的那样但现在我想改变鼠标光标，使其显示我可以放置元素的位置（cursor: "copy"）或不可能的位置（cursor: "no-drop"）。

当然这应该只在拖动过程中发生，否则应该显示正常的光标。

注意：可以假设只允许在一个特殊<div>中删除（例如由id或class标识）以及其他任何地方都不允许丢弃。< / p>

Answer 1

您可以使用start方法使用css()事件回调拖动时将可拖动的光标样式设置为no-drop，并在结束时将其更改为copy over事件回调中的可放置。

一旦可拖动的叶子可以放置，你可以将光标恢复到out事件回调中的no-drop，并通过设置CSS {{1将拖动停止时将其重置回默认光标可拖动的stop事件回调中的cursor属性值，如下所示：

initial

$(function() {
  $("#draggable").draggable({
    start: function(event,ui){
     $(this).css("cursor", "no-drop");
    },
    stop: function(event,ui){
     $(this).css("cursor", "initial");
    }
  });
  $("#droppable").droppable({
    over: function(event, ui) {
      ui.draggable.css("cursor", "copy");
    },
    out: function(event, ui) {
      ui.draggable.css("cursor", "no-drop");
    }
  });
});

div {
  display: inline-block;
  margin: 20px;
  text-align: center;
}
#draggable {
  width: 50px;
  height: 50px;
  line-height: 50px;
  background: dodgerblue;
}
#droppable {
  width: 100px;
  height: 100px;
  line-height: 100px;
  background: hotpink;
}

Answer 2

好的，非常感谢你！您的所有答案都非常有用，并激励我找到适合我的解决方案：http://jsfiddle.net/qck9kf17/

＆＃34;技巧＆＃34;基本上是：

$('.box').draggable({ cursor: "no-drop" });

$('.container').droppable({
    over: function(){
        $('body').css('cursor','copy');
    },
    out: function(){
        $('body').css('cursor','no-drop');
    }
});

Answer 3

给dropzone一个类（dropzone），当你开始拖动时，通过Javascript将一个类添加到body元素（draggingInEffect）。

一旦停止拖动，再次从正文中删除该类。

然后添加CSS规则body.draggingInEffect .dropzone { cursor: url(whatever); }

Answer 4

拖动时更改光标

$( ".selector" ).draggable({ cursor: "crosshair" });

在悬停目标

上方使用悬停类

$( ".selector" ).droppable({ hoverClass: "drop-hover" });

切换光标以显示我可以放置元素的位置

4 个答案: