jQuery draggable + droppable: come scattare l'elemento rilasciato sull'elemento lasciato cadere

Question

Ho il mio schermo diviso in due DIV s. A sinistra DIV ho alcuni 50x50 pixel DIV s, a destra DIV Ho una griglia vuota composta da 80x80 LI s. Gli DIV s a sinistra sono trascinabili e una volta rilasciati su un LI, devono essere allineati al centro di tale LI.

Suoni semplici, giusto? Non so come fare a fare questo. Ho provato manipolando le proprietà dello e left del DIV abbandonate per corrispondere a quelle dello LI in cui sono state rilasciate, ma le proprietà left e top sono relative a sinistra DIV.

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.

Edit 2: Per chiunque altro ha questo problema, questo è come ho riparato:

ho usato la soluzione di Keith della rimozione dell'elemento trascinato e l'immissione all'interno del caduto-on elemento nel drop callback di il plugin droppable:

function gallerySnap(droppedOn, droppedElement) 
{ 
    $(droppedOn).html('<div class="drop_styles">'+$(droppedElement).html()+'</div>'); 
    $(droppedElement).remove(); 
} 

io non l'elemento sceso a essere trascinabile di nuovo, ma se lo fai, basta legano draggable di nuovo.

Per me questo metodo ha risolto anche il problema riscontrato durante il posizionamento degli elementi rilasciati (che sarebbe relativo a sinistra DIV) e lo scorrimento 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 questo suggerimento.

Probabilmente non vincerò alcun premio di codice Awesome con questo, quindi se si vedono margini di miglioramento, si prega di condividere!

Answer 1

Ho avuto un problema simile - ho lavorato intorno ad esso, eliminando manualmente l'elemento trascinato dal suo vecchio genitore e aggiungendolo al caduto sull'elemento .

Answer 2

Se i div s a sinistra sono in realtà nelle li s sulla destra (che si può confermare con Firebug), e se i li s sono tutti in un ul (come dovrebbero essere), provare uno o entrambi dei seguenti:

ul#right_div { 
    text-align: center; 
} 

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

Answer 3

ho scoperto che quando si fa il trascinamento, jQuery UI aggiunge una linea di dirvi dove si lasciò cadere. 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 classes so that it looks od.  
    ui.draggable.removeClass(draggedclass).addClass(droppedclass); 
    ui.draggable.removeAttr('style'); 
}); 

Answer 4

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

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

Answer 5

$("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'}); 
          } 
        } 
        ); 

Answer 6

ho trovato che il metodo di Keith ha lavorato per me. Dal momento che la sua risposta non include un esempio di implementazione, vi posterò 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, un po 'più conciso:

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

Answer 7

basata sul codice di Barry, che cosa se vuoi aggiungere un opzione con un pulsante "x" l'elemento da staccare di nuovo dal nuovo genitore ed essere ricollegato alla iniziale?

ho pensato sth come questo, ma non sembrano lavorare .. a fare una sorta di una variabile che tiene 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 si può ottenere il concetto ... solo in grado di invertire ciò che è caduto nel loro stato iniziale.