jQuery draggable + droppable: come applicare lo snap all’elemento abbandonato

Ho il mio schermo diviso in due DIV . Nel DIV sinistro ho alcuni DIV 50×50 pixel, nel DIV destro ho una griglia vuota composta da 80×80 LI . I DIV a sinistra sono trascinabili, e una volta lasciati su una LI , dovrebbero scattare al centro di quella LI .

Sembra semplice, giusto? Non so come fare a fare questo. Ho provato a manipolare le proprietà CSS del DIV top e left proprietà CSS in modo che corrispondessero a quelle del LI cui sono state rilasciate, ma le proprietà left e top sono relative al DIV sinistro.

Come posso fare in modo che l’elemento rilasciato si agganci al centro dell’elemento in cui è caduto? Deve essere semplice, vero?

Modifica: sto usando jQuery UI 1.7.2 con jQuery 1.3.2.

Modifica 2: per chiunque abbia questo problema, questo è il modo in cui l’ho risolto:

Ho usato la soluzione di Keith per rimuovere l’elemento trascinato e posizionarlo all’interno dell’elemento lasciato cadere nella richiamata di rilascio del plugin trascinabile:

 function gallerySnap(droppedOn, droppedElement) { $(droppedOn).html('
'+$(droppedElement).html()+'
' ); $(droppedElement).remove(); }

Non riesco a trascinare di nuovo l’elemento lasciato cadere, ma se lo fai, legalo di nuovo a esso.

Per me questo metodo ha anche risolto il problema che avevo quando posizionavo gli elementi caduti (che sarebbero relativi al DIV sinistro) e scorrendo all’interno del secondo DIV . (Gli elementi resterebbero fissi sulla pagina, ora scorrono lungo).

Ho giocato con le opzioni di snap per renderlo bello durante il trascinamento, quindi grazie a karim79 per quel suggerimento.

Probabilmente non vincerò alcun premio di codice Awesome con questo, quindi se vedi margini di miglioramento, per favore condividi!

Ho avuto un problema simile: ho lavorato attorno rimuovendo manualmente l’elemento trascinato dal suo vecchio genitore e aggiungendolo all’elemento eliminato.

Ho scoperto che il metodo di Keith ha funzionato per me. Poiché la sua risposta non include un’implementazione di esempio, inserirò la mia:

 $('.dropTarget').droppable({ drop: function(ev, ui) { var dropped = ui.draggable; var droppedOn = $(this); $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn); } }); 

o, in modo leggermente più conciso:

 $('.dropTarget').droppable({ drop: function(ev, ui) { $(ui.draggable).detach().css({top: 0,left: 0}).appendTo(this); } }); 

Grazie per il tuo post: mi ha aiutato nella giusta direzione. Trovo un po ‘più pulito per impostare le proprietà di posizione dell’object trascinabile invece di scherzare con il codice HTML. Questo imposta la posizione nell’angolo in alto a sinistra dell’object droppable , ma è ansible modificarlo per centrarlo.

 drop: function(event, ui) { $(ui.draggable).css('top', $(this).position().top); $(ui.draggable).css('left', $(this).position().left); } 

Ho scoperto che quando si esegue il trascinamento, l’interfaccia utente di jQuery aggiunge una riga in linea per dirti dove l’hai rilasciata. Di seguito è riportato un esempio del codice che ho usato per farlo scattare in posizione

 $('.droppable').droppable({ drop: function(ev, ui) { //Get Details of dragged and dropped var draggedclass = ui.draggable.attr('class'), droppedclass = 'class' + $(this).attr('name').toLowerCase(); //update the classs so that it looks od. ui.draggable.removeClass(draggedclass).addClass(droppedclass); ui.draggable.removeAttr('style'); }); 
 $("form li").draggable({snap:'.ui-droppable', snapMode:'inner', revert:true}); $('.drop').droppable({drop:function(ev, ui) {$(ui.draggable).appendTo($(this)) .css({position:'static', left:'0px', top:'0px'}) .draggable('option', 'disabled', false) .css({position:'relative'}); } } ); 

Se i div s a sinistra sono effettivamente in li a destra (che puoi confermare con Firebug), e se i li sono tutti in un ul (come dovrebbero essere), prova uno o entrambi i punti seguenti:

 ul#right_div { text-align: center; } ul#right_div li { text-align: center; } 

basato sul codice di Barry, e se volessimo aggiungere un’opzione con un pulsante “x” l’elemento da staccare nuovamente dal nuovo genitore e ricollegarlo all’iniziale?

Ho pensato a sth in questo modo, ma non sembrava funzionare … per creare una sorta di variabile che mantenga lo stato iniziale

 var flag; $('.draggable-div').draggable({ revert: 'invalid', stop: function(){ $(this).draggable('option','revert','invalid'); $(this).find('.undo').show(); flag=$(this).parent(); } }); $('.draggable-div').find('.undo').click(function(i, e) { var $div = $(this).parent(); $($div).detach().appendTo(flag); } 

sth è sicuramente sbagliato, ma non so se riuscirai a ottenere il concetto … solo potendo invertire ciò che hai lasciato cadere nel loro stato iniziale.