C'è un modo in cui posso ottenere jQuery per eseguire una funzione quando si trascina un elemento all'esterno di un DIV trascinabile?jQuery Droppable: lasciare fuori div?
Diciamo che abbiamo elementi trascinabili o ordinabili in un div e li vuoi eliminati se vengono lasciati fuori dal div principale.
So che c'è l'evento "out" ma funziona non appena si trascina l'elemento all'esterno del div, non quando lo si rilascia (rilascia il pulsante del mouse).
Finalmente ha trovato una soluzione adeguata a questo, anche se è un po '"hacky" pure. Quello che faccio è impostare il div in primo piano con i draggable come droppable, ma usare le funzioni dropover e dropout per determinare se l'elemento è al di fuori del div primo piano. Quando è all'esterno del div, lego l'evento mouseup per eseguire la funzionalità di rilascio. Quando ritorna in I, disattivo l'evento mouseup in modo che non si attivi.
Perché durante il trascinamento sto già tenendo premuto il pulsante del mouse, rilasciandolo è come far cadere quello che ho nella mia "mano".
$("#foregroundDiv").droppable({
accept: ".draggableThingy",
tolerance: "pointer",
out: function(event, ui) {
$(ui.helper).mouseup(function() {
doSomethingTo(ui.draggable);
});
},
over: function(event, ui) {
$(ui.helper).unbind("mouseup");
}
});
Perché non ha avvolto tutti gli elementi con un altro div trascurabile, quindi eseguire il controllo lì?
Che dire se l'utente l'ha rilasciato all'esterno della finestra del browser? Lo considereresti anche tu?
Ho provato a confezionarlo in un altro oggetto trascinabile, ma questo non sembra funzionare correttamente, non importa quale. L'evento "sfondo" trascinabile sparerà anche se cado nel div "in primo piano" in cui si trovava l'oggetto trascinabile. Vedi http://stackoverflow.com/questions/1491742/jquery-ui-droppable-background Fondamentalmente sto ancora combattendo lo stesso problema, sono appena tornato a provare a sistemarlo. – kasakka
se il wrapping non funziona per te prova l'impilamento, ma devi impostare in primo piano come un fratello sullo sfondo, quindi basta impostare lo z-index appropriato o, in caso contrario, CHECK the event.target nella funzione drop callback. Drop: function (e) {if (e.targe.id == bg_id) {...} else {...}} – jerjer
Ho provato che, senza fortuna. Sembra che la funzione di rilascio non riconosca nessun altro ID di destinazione evento diverso da quello trascinabile. Almeno quando provo ad accedere alla console l'id, solo i record div droppabili, tutto il resto non produce nulla. Allo stesso modo usare altro per aggirare questo problema non funziona - o fa qualcosa quando viene rilasciato sul div o non fare nulla. Sfortunatamente non funziona se lo sfondo div riempie l'intera finestra, ignora ciò che si trova sopra al div – kasakka
Risolto questo in un modo abbastanza "hacky": creato un tavolo con un div di contenuto al centro e reso droppabili tutte le altre celle del tavolo. Essenzialmente questo significa che puoi lasciare il centro esterno senza problemi, ma è ancora lontano da un buon modo per farlo.
Se qualcuno ha un modo migliore, per favore dimmi.
Ho avuto esattamente questo problema, e questa è stata la soluzione migliore che ho trovato. Grazie! – froadie