如何在 CSS 上拖动时更改光标答案

【问题标题】：How to change cursor while dragging over CSS如何在 CSS 上拖动时更改光标
【发布时间】：2016-05-04 00:18:53
【问题描述】：

我正在编写一个脚本，我需要拖放一些列表项到一个 div，但我在那个 css 代码中有一个 cursor: default;，当我拖动那个列表项时在 div 上，它不会改变光标。

如何将 jQuery UI 的光标设置为 !important 或类似的东西？

谢谢你和问候。

【问题讨论】：

标签： jquery-ui drag-and-drop

【解决方案1】：

如 Jquery UI API 中所述，您需要像这样定义它：

$( "#draggable" ).draggable({ 光标：“十字准线” });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">

  <style>
  #draggable { width: 150px; height: 150px; padding: 0.5em; background:green; }
  </style>

  <script>
  $(function() {
    $( "#draggable" ).draggable({
      cursor:"crosshair"
    });
  });
  </script>

 
<div id="draggable" class="ui-widget-content">
  <p>Drag this</p>
</div>

【讨论】：

我有这样的，但我也有一个光标：默认；在我的 css 中，所以当我用那个 css 拖动 div 时，css 的光标优于光标 jQuery。
你应该在你的主 css 之后加载 jquery ui 库，以便它被 jquery ui 覆盖。你能发布一个实时链接或你的代码块吗？