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

Question

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

在使用 jQuery UI 的 JavaScript 应用程序中，我使用了 draggable()和 droppable()能够移动元素的 API。这可以直接按预期工作。
但现在我想更改鼠标光标，使其显示可以放置元素的位置 ( cursor: "copy" ) 或不可能放置元素的位置 ( cursor: "no-drop")。

这应该 - 当然 - 只在拖动期间发生，否则应该显示正常光标。

注意:可以假设只有在一个特殊的 <div> 中才允许掉落。 (例如，由 id 或 class 标识)和其他任何地方都不允许放置。

Answer 1

您可以在拖动时使用 start 将可拖动对象的光标样式设置为 no-drop使用 css() 的事件回调方法，当它超过 over 内的可放置对象时，将其更改为 copy事件回调。

一旦 draggable 离开 droppable，您可以在 out 中将光标恢复为 no-drop事件回调，并通过在 stop 中将 CSS cursor 属性值设置为 initial 将其重置为默认光标draggable的事件回调如下图:

$(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;
}

<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div id="draggable">
  <span>Drag</span>
</div>

<div id="droppable">
  <span>Drop here</span>
</div>