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

Question

您好，我需要在用户拖动按钮时将光标变成十字准线。以下代码无效：

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

Answer 1

要实现这一点，您可以使用可拖动库的 cursor 属性，如下所示：

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

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

$("#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>

Answer 2

来自 jQuery UI 文档 https://api.jqueryui.com/draggable/
$( ".selector" ).draggable({ cursor: "crosshair" });
或者如果它已经初始化
$( ".selector" ).draggable( "option", "cursor", "crosshair" );

看这里https://jsfiddle.net/W4Km8/9844/

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

Change the cursor to a crosshair when a button is dragged

javascript

jquery

draggable