Arrastre Jquery que se puede arrastrar fuera de su cuadro de diálogo principal de jquery

Question

Tengo un diálogo de jquery que está lleno de objetos que se pueden arrastrar. El objetivo que se puede quitar está fuera del diálogo.

Cuando inicio un arrastre, el droppable responde correctamente (indicaciones visuales de que es un objetivo que se puede soltar) y después de soltar los eventos correctos se activan para poder manejar el drop correctamente.

El problema es que el objeto arrastrado permanece visible solo dentro del cuadro de diálogo y no "salta".

Ya tengo arrastrables que arrastran de un div desplazable a otro sin problema, pero de un diálogo a la página que contiene el diálogo no funciona. El contenido del diálogo se desplaza en cualquier dirección en que vaya el arrastre.

Mis argumentos que pueden arrastrarse son los siguientes:

var draggableArguments={ 
    revert: 'invalid', 
    helper:'clone', 
    containment: 'DOM', 
    zIndex: 999, 
    addClasses: false 
    } 

    theObject.draggable(draggableArguments); 

Cualquier sugerencia para que mis objetos que pueden arrastrarse pueden cruzar las fronteras de diálogo?

Gracias.

Answer 1

Solucionado, en realidad era bastante simple.

Solo necesitaba usar la opción appendTo del arrastrable para que el helper se anexe al elemento donde quiero que se arrastre (por ejemplo, #page, un div que abarca mi página). Esto lo quita del diálogo (que tiene una propiedad "overflow: auto", que agrega barras de desplazamiento para extender el lienzo para que el elemento de arrastre esté siempre dentro) y lo agrega al elemento #page.

El único problema era que mi cuadro de diálogo tenía un zIndex bastante alto, así que simplemente incrementé la opción zIndex para que fuera más alta.

var draggableArguments={ 
    revert: 'invalid', 
    helper:'clone', 
    appendTo: '#page', 
    containment: 'DOM', 
    zIndex: 1500, 
    addClasses: false 
} 

theObject.draggable(draggableArguments); 

Answer 2

que tiene que hacer esto:

 
$('.my_draggable').draggable({ 
    helper:'clone', 
    appendTo: 'body', 
    scroll: false 
});