przełącznik kursora, aby pokazać, gdzie można upuścić element

Question

Mam pytanie/zadanie, które jest tak oczywista, że ​​ja wciąż zastanawiam się dlaczego nie mogę znaleźć rozwiązanie, które ...

W aplikacji JavaScript, który jest przy użyciu interfejsu jQuery używam API draggable() i droppable(), aby móc przenosić elementy. Działa to prosto i zgodnie z oczekiwaniami.
Ale teraz chcę zmienić kursor myszy w taki sposób, aby pokazywał, gdzie mogę upuścić element (cursor: "copy") lub gdzie nie jest to możliwe (cursor: "no-drop").

To powinno - oczywiście - mieć miejsce tylko podczas przeciągania, w przeciwnym razie powinien zostać wyświetlony normalny kursor.

Uwaga: można założyć, że kropla jest dozwolona tylko w jednym specjalnym <div> (np. Identyfikowanym przez id lub class) i wszędzie tam, gdzie kropla nie jest dozwolona.

Answer 1

Można ustawić styl kursor przeciągnięcie do no-drop podczas przeciągania za pomocą wywołania zwrotnego zdarzenia start za pomocą metody css() i zmianę do copy, gdy jest on nadpisywany w ramach wywołania zwrotnego zdarzenia over.

Gdy przeciągany pozostawia droppable można przywrócić kursor z powrotem do no-drop w zwrotnego out zdarzeń i ustaw przywrócić go z powrotem do domyślnego kursora podczas przeciągania przystanki poprzez ustawienie wartości właściwości CSS cursor do initial w zwrotnego stop zdarzeń z przeciągany jak pokazano poniżej:

$(function() { 
 
    $("#draggable").draggable({ 
 
    start: function(event,ui){ 
 
    $(this).css("cursor", "no-drop"); 
 
    }, 
 
    stop: function(event,ui){ 
 
    $(this).css("cursor", "initial"); 
 
    } 
 
    }); 
 
    $("#droppable").droppable({ 
 
    over: function(event, ui) { 
 
     ui.draggable.css("cursor", "copy"); 
 
    }, 
 
    out: function(event, ui) { 
 
     ui.draggable.css("cursor", "no-drop"); 
 
    } 
 
    }); 
 
});

div { 
 
    display: inline-block; 
 
    margin: 20px; 
 
    text-align: center; 
 
} 
 
#draggable { 
 
    width: 50px; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    background: dodgerblue; 
 
} 
 
#droppable { 
 
    width: 100px; 
 
    height: 100px; 
 
    line-height: 100px; 
 
    background: hotpink; 
 
}

<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 
 
<div id="draggable"> 
 
    <span>Drag</span> 
 
</div> 
 

 
<div id="droppable"> 
 
    <span>Drop here</span> 
 
</div>

Answer 2

Podaj dropzone klasy (dropzone) i po rozpoczęciu przeciągania dodaj klasę do elementu body (draggingInEffect) przez Javascript.

Po zatrzymaniu przeciągania usuń tę klasę z ciała ponownie.

Następnie dodać regułę CSS body.draggingInEffect .dropzone { cursor: url(whatever); }

Answer 3

Zmień kursor podczas przeciągania

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

użyć klasy aktywowanych kiedy to się skończy cel upuszczenia

$(".selector").droppable({ hoverClass: "drop-hover" }); 

Answer 4

Ok, dziękuję bardzo! Wszystkie Twoje odpowiedzi były bardzo pomocne i zainspirował mnie do rozwiązania, które pracuje dla mnie: http://jsfiddle.net/qck9kf17/

W „trick” jest w zasadzie:

$('.box').draggable({ cursor: "no-drop" }); 

$('.container').droppable({ 
    over: function(){ 
     $('body').css('cursor','copy'); 
    }, 
    out: function(){ 
     $('body').css('cursor','no-drop'); 
    } 
});