cursore Passare mostrare dove posso cadere elemento

Question

devo un'informazione/compito talmente ovvio che ancora chiedo perché non trovavo soluzione assolutamente ...

In un'applicazione JavaScript cioè utilizzando l'interfaccia utente di jQuery Sto usando l'API draggable() e droppable() per poter spostare gli elementi. Funziona in modo semplice e come previsto.
Ma ora voglio cambiare il cursore del mouse in modo che mostri dove posso rilasciare un elemento (cursor: "copy") o dove non è possibile (cursor: "no-drop").

Questo dovrebbe - ovviamente - verificarsi solo durante il trascinamento, altrimenti dovrebbe essere mostrato il cursore normale.

Nota: si può presumere che una goccia è consentito solo in uno speciale <div> (es identificati mediante un id o class) e altrove una goccia non è consentito.

Answer 1

È possibile impostare lo stile del cursore di trascinabile a no-drop durante il trascinamento utilizzando la chiamata all'evento start utilizzando il metodo css() e modificandolo a copy quando è in over a droppable entro la chiamata all'evento over.

Una volta che il trascinabile lascia droppable, è possibile ripristinare il cursore indietro no-drop all'interno del callback out evento, e impostare ripristinare di nuovo al cursore predefinito quando si trascina fermate impostando il valore della proprietà CSS cursor al initial all'interno del callback stop evento di trascinabili come illustrato di seguito:

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

Assegnare alla classe di rilascio una classe (dropzone) e quando si avvia il trascinamento, aggiungere una classe all'elemento body (draggingInEffect) tramite Javascript.

Una volta terminato il trascinamento, rimuovere nuovamente quella classe dal corpo.

Quindi aggiungere una regola CSS body.draggingInEffect .dropzone { cursor: url(whatever); }

Answer 3

Cambiare il cursore mentre si trascina

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

utilizzare una classe hover quando è finita la destinazione di rilascio

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

Answer 4

Ok, vi ringrazio molto! Tutte le tue risposte sono state molto disponibili e mi ha spinto a una soluzione che sta lavorando per me: http://jsfiddle.net/qck9kf17/

Il "trucco" è fondamentalmente:

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

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