jQuery arrastrable + droppable: cómo ajustar el elemento caído al elemento caído

Tengo mi pantalla dividida en dos DIV s. En la izquierda DIVTengo unos cuantos píxeles de 50x50 DIV s, en la derecha DIVtengo una cuadrícula vacía hecha de 80x80 LIs. Los DIV s de la izquierda son arrastrables, y una vez que se sueltan en un LI, deben encajar en el centro de ese LI.

Suena simple, ¿verdad? No sé cómo hacer esto. Intenté manipular las propiedades CSS dropped DIV ' s top y left para que coincidieran con las de LI en las que se caen, pero las left y top las propiedades son relativas a la izquierda DIV.

¿Cómo puedo hacer que el elemento caído se ajuste al centro del elemento en el que se ha caído? Eso tiene que ser simple, ¿verdad?

Edit: Estoy usando jQuery UI 1.7.2 con jQuery 1.3.2.

Edit 2: Para quienquiera que tenga este problema, así es como lo arreglé: {[20]]}

Utilicé la solución de Keith de eliminar el elemento arrastrado y colocarlo dentro del elemento dropped-on en la devolución de llamada drop del plugin droppable: 

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

No hago que el elemento caído sea arrastrable de nuevo, pero si lo haces, simplemente enlaza arrastrable a él de nuevo.

Para mí este método también resolvió el problema que tenía al colocar los elementos caídos (que serían relativos a la izquierda DIV) y desplazarse dentro de la segunda DIV. (Los elementos permanecerían fijos en la página, ahora se desplazan).

Jugué con las opciones de ajuste para que se vea bien mientras arrastra, así que gracias a karim79 por eso sugerencia.

Probablemente no ganaré ningún premio de Código impresionante con esto, así que si ves margen de mejora, ¡por favor comparte!

Author: 10goto10, 2009-08-10
Source

7 answers

Tuve un problema similar: trabajé alrededor de él eliminando manualmente el elemento arrastrado de su padre anterior y agregándolo al elemento caído.

 16
Author: Keith,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-08-10 12:55:07

Descubrí que el método de Keith funcionaba para mí. Dado que su respuesta no incluye una implementación de ejemplo, publicaré la mía: 

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

O, un poco más conciso: 

$('.dropTarget').droppable({
    drop: function(ev, ui) {
        $(ui.draggable).detach().css({top: 0,left: 0}).appendTo(this);
    }
});
 71
Author: Barry Pitman,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-04-04 07:32:19

Gracias por tu post me ayudó en la dirección correcta. Me parece un poco más limpio establecer las propiedades de posición del objeto arrastrable en lugar de jugar con el código HTML. Esto establece la posición en la esquina superior izquierda del objeto droppable, pero también puede modificarla para que esté centrada.

drop: function(event, ui) {
   $(ui.draggable).css('top', $(this).position().top);
   $(ui.draggable).css('left', $(this).position().left);
}
 10
Author: glackk,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-12-26 19:48:50

Descubrí que cuando haces el arrastre, jQuery UI agrega una línea para indicarte dónde la soltaste. A continuación se muestra una muestra del código que utilicé para encajarlo en su lugar

$('.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');
});
 3
Author: AutomatedTester,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-12-26 19:58:11 
$("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'});
                           }
                     }
                    );
 3
Author: diyism,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-12-27 06:36:42

Si las divs de la izquierda están realmente en las li s de la derecha (lo que puede confirmar con Firebug), y si las li s están todas en una ul (como deberían ser), pruebe uno o ambos de los siguientes: 

ul#right_div {
  text-align: center;
}

ul#right_div li {
  text-align: center;
}
 0
Author: Anthony,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-12-26 19:48:32

Basado en el código de Barry, ¿qué pasa si queremos añadir una opción con un botón "x" el elemento que se separe de nuevo del nuevo padre y se vuelva a unir a la inicial?

Pensé sth así, pero no parecía funcionar.. para hacer algún tipo de variable que contenga el estado inicial 

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 está definitivamente equivocado, pero no se si puedes entender el concepto... sólo ser capaz de revertir lo que ha caído a su estado inicial.

 0
Author: nikolas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-04-04 14:58:25