Измените курсор на перекрестье при перетаскивании кнопки

Question

Здравствуйте, мне нужно повернуть курсор в перекрестье, пока пользователь перетаскивает кнопку. Приведенный ниже код не работает:

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

Answer 1

Для достижения этой цели вы можете использовать cursor свойство из перетаскиваемой библиотеки, например:

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

В качестве альтернативы, если вы хотите установить пользовательский курсор с помощью CSS вы необходимо будет использовать события start и end библиотеки перетаскивания jQuery для изменения свойства 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/