javascript - 拖动按钮时将光标更改为十字线

Question

您好，我需要在用户拖动按钮时将光标变成十字准线。下面的代码不起作用:

$("button").draggable('cursor','crosshair');

Answer 1

要实现此目的，您可以使用 cursor可拖动库的属性，如下所示:

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

或者，如果您想通过 CSS 设置自定义光标，则需要使用 start和end jQuery 可拖动库的事件可更改 CSS cursor ui.helper的属性(property)。试试这个:

$("#draggable").draggable({
  start: function(e, ui) {
    ui.helper.addClass('dragging');
  },
  stop: function(e, ui) {
    ui.helper.removeClass('dragging');
  }
});

.dragging { cursor: url('http://i.imgur.com/6r4pI7U.png'), crosshair; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div id="draggable">
  <p>Drag me</p>
</div>