Trascina Jquery trascinabile dalla sua finestra di dialogo jquery padre

Question

Ho una finestra di dialogo jquery piena di oggetti trascinabili. L'obiettivo droppable è al di fuori della finestra di dialogo.

Quando si avvia un trascinamento, il droppable risponde correttamente (le indicazioni visive indicano che si tratta di un bersaglio trascinabile) e dopo un rilascio vengono attivati ​​gli eventi corretti in modo da poter gestire correttamente il calo.

Il problema è che l'oggetto trascinato rimane visibile solo all'interno della finestra di dialogo e non "salta fuori".

Ho già elementi trascinabili che trascinano da un divisore scorrevole all'altro senza problemi, ma da una finestra di dialogo alla pagina che contiene il dialogo non funziona. I contenuti della finestra di dialogo scorrono in qualunque direzione si stia muovendo.

miei argomenti trascinabili sono i seguenti:

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

    theObject.draggable(draggableArguments); 

Eventuali suggerimenti in modo che i miei oggetti trascinabili possono attraversare i confini di dialogo?

Grazie.

Answer 1

Risolto, in realtà era abbastanza semplice.

Ho solo bisogno di usare l'opzione appendTo sul trascinabile in modo che l'helper sia aggiunto all'elemento in cui voglio che si trascini (ad esempio #page, un div che comprende la mia pagina). Ciò lo rimuove dalla finestra di dialogo (che ha una proprietà "overflow: auto", che aggiunge barre di scorrimento per estendere il canvas in modo che l'elemento di trascinamento rimanga sempre all'interno) e lo aggiunge all'elemento #page.

L'unico problema era che la mia finestra di dialogo aveva uno zIndex piuttosto alto, quindi ho semplicemente incrementato l'opzione zIndex per aumentare.

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

theObject.draggable(draggableArguments); 

Answer 2

quello che dovete fare questo:

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