example - jQuery draggable+droppable: cómo ajustar el elemento dropeado al elemento dropeado

jquery ui textarea

Question

Tengo mi pantalla dividida en dos DIV . En el DIV izquierdo tengo unos DIV s de 50x50 píxeles, en el DIV derecho tengo una cuadrícula vacía hecha de 80x80 LI s. Los DIV a la izquierda son arrastrables, y una vez que se colocan en un LI , deben ajustarse al centro de ese LI .

Suena simple, ¿verdad? Simplemente no sé cómo hacer esto. Intenté manipular las propiedades CSS top e left DIV descartado para que coincidan con las del LI que se colocaron, pero las propiedades top e left son relativas al DIV izquierdo.

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

Edición: Estoy usando jQuery UI 1.7.2 con jQuery 1.3.2.

Edit 2: Para quien más tenga este problema, así es como lo solucioné:

Usé la solución de Keith de eliminar el elemento arrastrado y colocarlo dentro del elemento insertado en la devolución de llamada de drop del complemento drop :

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

No hago que el elemento soltado se pueda arrastrar de nuevo, pero si lo haces, solo debes unirlo de nuevo.

Para mí, este método también resolvió el problema que tenía al posicionar los elementos perdidos (que serían relativos al DIV izquierdo) y al desplazarse dentro del segundo DIV . (Los elementos permanecerían fijos en la página, ahora se desplazan).

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

Probablemente no gane ningún premio de Awesome Code con esto, así que si ves que hay espacio para mejorar, ¡por favor comparte!

Answer 1

Encontré que cuando haces el arrastre, jQuery UI agrega una línea para decirte dónde lo dejaste. A continuación se muestra un ejemplo del código que solía colocar 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'');
});

Answer 2

Encontré que el método de Keith funcionó para mí. Como 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, algo más conciso:

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

Answer 3

Gracias por tu publicación, me ayudó en la dirección correcta. Lo encuentro un poco más limpio para establecer las propiedades de posición del objeto que se puede arrastrar en lugar de meterse con el código HTML. Esto establece la posición en la esquina superior izquierda del objeto que se puede droppable , pero también puede modificarlo para centrarlo.

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

Answer 4

Si los div s a la izquierda están en realidad en los li s a la derecha (que puede confirmar con Firebug), y si los li s están todos 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;
}

Answer 5

Tuve un problema similar: lo resolví eliminando manualmente el elemento arrastrado de su padre anterior y lo agregué al elemento soltado.

Answer 6

basado en el código de Barry, ¿qué sucede si nos gustaría agregar una opción con una "x" al elemento que se va a separar nuevamente del nuevo padre y que se vuelva a unir a la inicial?

Pensé algo así, pero no parecía funcionar ... para hacer algún tipo de variable que mantuviera 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);
 }

Definitivamente, algo está mal, pero no sé si puedes entender el concepto ... solo ser capaz de revertir lo que hayas bajado a su estado inicial.

Answer 7

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