2012-05-22 17 views
11

¿Cómo se agrega un elemento que se arrastra a un elemento de destino al soltar, usando los juegos de arrastrar/arrastrar de jQueryUI? Parece que la interfaz de usuario de jQuery funciona ahora mismo, solo mueve los elementos en la pantalla a través del posicionamiento absoluto. Desafortunadamente, esta funcionalidad hace que los envíos de formularios sean inútiles, ya que no puede obtener las posiciones de los valores en el envío.IU de JQuery: anexar Arrastrable a Droppable

¡Gracias de antemano por cualquier artículo/punteros!

+1

En mi experiencia, que en realidad modifica el DOM para reflejar el nuevo posicionamiento; Lo sé porque actualizo las listas (a través de AJAX) y eso implica escanear el nuevo orden div en la devolución de llamada 'completa'. ¿Que estás tratando de hacer? – Sp4cecat

+0

¿Qué estás tratando de hacer exactamente? Parece que podría estar buscando ordenar en lugar de arrastrar: http://jqueryui.com/demos/sortable/ –

Respuesta

23

Si entendí correctamente, quiere que el elemento arrastrado se separe de su padre actual y se adjunte al nuevo, ¿verdad? Puede usar un ayudante para arrastrar (para que el elemento original no se vea afectado) y, al soltarlo, separarlo y anexarlo al objetivo (gracias @Oleg y @Brian por mejorar la respuesta original).

$(myDraggable).draggable({ 
    helper:"clone", 
    containment:"document" 
}); 

$(myDroppable).droppable({ 
    drop:function(event, ui) { 
     ui.draggable.detach().appendTo($(this)); 
    } 
}); 

Ejemplo de trabajo en jsFiddle

+0

¡Muchas gracias por su ayuda, mgibsonbr! ¡Realmente aprecio el tiempo y el esfuerzo que le tomó escribir esto! – user1110302

+0

Esto es muy útil, gracias –

+2

No necesita usar ninguna variable global para eso - ui.helper es su objeto jq arrastrable. Puede deshacerse de los métodos de inicio/detención, y al soltar debe ser ui.helper.detach(). AppendTo ($ (this)). – Oleg

Cuestiones relacionadas