Question

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

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

Answer 1

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

请参阅此处https://jsfiddle.net/W4Km8/9844/

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

2 个答案: