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

Question

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

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

Answer 1

要做到这一点，你可以用拖动库cursor财产，像这样：

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

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

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