Interfaccia utente JQuery: rilasciare un elemento lungo nella posizione del cursore anziché nella parte centrale dell'elemento.

Question

Ho alcuni elementi trascinabili molto lunghi che posso rilasciare in tutte le celle di una tabella di sfondo.

Quando inizio a trascinare questo tipo di elemento al passaggio dei miei contenitori trascinabili (le celle del mio tavolo), il punto "caldo" per sapere dove l'elemento verrà rilasciato è il mezzo di se stesso.

Purtroppo, la parte centrale del mio elemento spesso non è visibile e non è utile rilasciare l'elemento nel posto giusto.

È possibile specificare la posizione del cursore per scegliere in quale contenitore l'elemento verrà rilasciato anziché il centro degli elementi?

Sono davvero bloccato e apprezzerò davvero qualsiasi aiuto.

Ciao, ecco un codice di esempio per descrivere il mio problema. Il div giallo non può facilmente cadere nelle celle perché è troppo lungo. jsbin.com/upunek/edit

Grazie

Answer 1

Penso che quello che stai cercando è tolerance. Probabilmente suggerirei di usare "pointer" poiché questo utilizzerà il cursore del mouse come punto di "sovrapposizione".

http://jqueryui.com/demos/droppable/

$('[id^="cell-"]').each(function(index) { 
    $(this).droppable({ 
    accept: ".cartridge", 
    hoverClass: "cell-highlght", 
    tolerance: "pointer", 
    drop: function(event, ui) { 
    $(this).addClass("cell-dropped"); 
    } 
    }); 
}); 

http://jsbin.com/upunek/2/edit

Answer 2

Come accennato da James Montagne, la tolleranza è ciò che serve per questo. Inoltre, per droppable puoi usare cursorAt. Questo aiuta a impostare l'immagine relativa al cursore (solo necessario se l'immagine originale è più grande il clone si trascina)

http://api.jqueryui.com/draggable/#option-cursorAt