jQuery Problema di trascinamento e tracimazione [chiuso]

Question

Sto ottenendo un effetto indesiderato quando trascino un div da un div contenitore impostato come overflow: scroll.

Ho trovato un esempio di qualcun altro in cui hanno riscontrato il problema, ma non sono stato in grado di trovare una risoluzione

Esempio su Incolla bin

Quello che succede è che lo scorrimento è appena aumentato, posso vedere perché questo sarebbe il comportamento desiderato se si volesse trascinare verso una destinazione all'interno del div scorrevole ma voglio essere in grado di portarlo fuori dalla sua portata scorrevole.

Answer 1

Presta sicuramente attenzione alla documentazione

http://docs.jquery.com/UI/Draggable#option-scroll

  

scorrimento

     

Tipo:
booleano    Predefinito: true
  Se impostato su true , il contenitore scorre automaticamente durante il trascinamento.

Tutti quelli che entrano qui, imparano dal mio errore, RT (F) M !!!

Answer 2

Ho avuto un problema simile abilitando un trascinamento tra due div overflow-auto. Con l'aiuto delle risposte precedenti, ho scoperto che questa combinazione funziona per me (Safari 5.0.3, jquery-1.4.4, jquery-ui-1.8.7):

appendTo: 'body',
containment: 'window',
scroll: false,
helper: 'clone'

Answer 3

appendTo

Element, SelectorDefault: 'parent'

L'elemento passato o selezionato dall'opzione appendTo verrà utilizzato come contenitore dell'helper trascinabile durante il trascinamento. Per impostazione predefinita, l'helper viene aggiunto allo stesso contenitore trascinabile.

Esempi di codice Inizializza un trascinabile con l'opzione appendTo specificata.

$('.selector').draggable({ appendTo: 'body' });

Answer 4

La soluzione clone funziona, ma ha due problemi.

Primo: i cloni vengono aggiunti al corpo. A seconda del tuo CSS, il tuo elemento può cambiare gli stili, poiché prima che inizi, è all'interno di un altro elemento e durante il trascinamento, sarà direttamente sull'elemento body.

Secondo: a volte l'elemento DEVE spostarsi e il clone lascia l'oggetto lì.

Quindi, la soluzione per questo problema è:

$('.selector').draggable({
    helper: 'clone',
    start: function(){
        $(this).hide();             
    },
    stop: function(){
        $(this).show()
    }
});

Answer 5

L'impostazione dell'opzione di scorrimento non impedisce ai bambini di essere nascosti nell'area di overflow. Ho escogitato un work-a-round che utilizza l'opzione helper. Dai un'occhiata:

http://pastebin.me/164f0a4073496563fe3179ddcec5fd6d

Anche qui c'è un riferimento ad un altro post che ho scritto:

jquery ui elementi trascinabili non "trascinabile" al di fuori del div scrolling

Answer 6

Puoi anche specificare quali tipi di elementi non vuoi includere.

<div class="draggable"> 
    <h2>This will drag the div</h2>
    <ul>
       <li>This won't drag the div</li>
    </ul>
</div>

Applica questa proprietà di annullamento per ignorare l'evento negli elementi figlio specificati

$('.draggable').draggable({cancel : 'ul'});