jQuery trascinabili + droppable: come scattare elemento sceso a elemento caduto-on

Question

Ho il mio schermo diviso in due DIVs. Nella DIV sinistra ho alcune DIVs 50x50 pixel, nella DIV destra ho una griglia vuota fatta di 80x80 LIs. Le DIVs a sinistra sono trascinabili, e una volta caduto su un LI, dovrebbero scattare al centro di quella LI.

Sembra semplice, giusto? Io proprio non so come arrivare a questo fatto. Ho provato manipolando proprietà DIV e top CSS del left sceso a corrispondere a quelli del LI che stanno caduto in, ma le proprietà left e top sono relativi al DIV sinistra.

Come posso meglio avere l'elemento sceso snap al centro dell'elemento è caduto in? Che devo essere semplice, giusto?

Modifica:. Sto utilizzando jQuery UI 1.7.2 con jQuery 1.3.2

Modifica 2: per chi ha altro questo problema, questo è come ho riparato:

Ho usato la soluzione di Keith della rimozione dell'elemento trascinato e collocandola all'interno dell'elemento caduto-on nella richiamata drop del plugin droppable:

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

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

Per me questo metodo anche risolto il problema che ho avuto nel posizionare gli elementi diminuito (che sarebbe relativamente al DIV sinistra) e scorrendo all'interno della seconda DIV. (Elementi resterebbero fissi a pagina, ora scorrere lungo).

ho giocato con le opzioni di snap per farlo sembrare buono durante il trascinamento, quindi grazie a karim79 per questo suggerimento.

Probabilmente non vincerà premi Codice impressionante con questo, quindi se si vede 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 sganciata su elemento.

Answer 2

ho scoperto 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 3

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 scherzi con il codice HTML. Questo imposta la posizione verso l'angolo in alto a sinistra dell'oggetto droppable, ma è possibile modificare di averlo centrato pure.

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

Answer 4

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

Se i divs a sinistra sono in realtà nelle lis sulla destra (che si può confermare con Firebug), e se i lis sono tutti in un ul (come dovrebbero essere), provare una o entrambe le seguenti operazioni:

ul#right_div {
  text-align: center;
}

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

Answer 7

basata sul codice di Barry, che cosa se ci vuoi aggiungere un'opzione con un pulsante "x" l'elemento da staccato di nuovo dal nuovo genitore ed essere riattaccato a quella iniziale?

ho pensato sth come questo, ma non sembra funzionare .. per fare qualche sorta di una variabile che detengono 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 è possibile ottenere il concetto ... solo essere in grado di invertire ciò che avete lasciato cadere al loro stato iniziale.