jQuery Draggable- und Überlaufproblem [geschlossen]

77

Ich habe einen unerwünschten Effekt, wenn ich ein Div aus einem Container-Div ziehe, das als Überlauf festgelegt ist: scroll.

Ich habe ein Beispiel für eine andere Person gefunden, bei der das Problem aufgetreten ist, aber ich konnte keine Lösung finden

Beispiel zum Einfügen eines Fachs

Was passiert ist, dass der Bildlauf nur vergrößert wird. Ich kann sehen, warum dies das gewünschte Verhalten ist, wenn Sie zu einem Ziel innerhalb des scrollbaren Div ziehen möchten, aber ich möchte es außerhalb seines Bildlaufbereichs nehmen können.

jquery-ui drag-and-drop Phill Duffy
quelle
Bitte fügen Sie Ihren Posts keine Signaturen oder Slogans hinzu .
Meagar

Antworten:

105

Ich hatte ein ähnliches Problem beim Aktivieren eines Drag zwischen zwei Überlauf-Auto-Divs. Mit Hilfe der vorherigen Antworten stellte ich fest, dass diese Kombination für mich funktioniert (Safari 5.0.3, jquery-1.4.4, jquery-ui-1.8.7):

appendTo: 'body',
containment: 'window',
scroll: false,
helper: 'clone'
Marks_
quelle
12
für mich sogar nur helfer: '
klon
Jahr arbeitete der Helfer auch für mich (allein)
Stevanicus
@ max4ever, wenn ich nur helper einbinde: klonen, es funktioniert, einer der anderen bringt es durcheinander! danke für den Kommentar.
Thomas Dignan
1
Vielen
2015 und diese Antwort rockt immer noch!
Austin Lovell
56

Anhängen

Element, SelectorDefault: 'Eltern'

Das Element, das an die Option appendTo übergeben oder von dieser ausgewählt wird, wird beim Ziehen als Container des ziehbaren Hilfsprogramms verwendet. Standardmäßig wird der Helfer an denselben Container wie das Draggable angehängt.

Codebeispiele Initialisieren Sie ein Draggable mit der angegebenen Option appendTo.

$('.selector').draggable({ appendTo: 'body' });
Chad Grant
quelle
Ich habe versucht, das zu tun, was Sie vorschlagen, aber es ändert es nicht in das gewünschte Verhalten. Wenn Sie den Code hinzufügen, den Sie in das Beispiel auf der Seite "Papierkorb einfügen" eingefügt haben, funktioniert es für Sie? Danke
Phill Duffy
3
Ja, ich scheitere total an dieser Frage. Ich habe eine Stunde damit gespielt. Das Beste, was ich bekommen kann, ist, wie ich es verlassen habe. Draggable funktioniert nicht mit Überlauf :(
Chad Grant
1
Keine Sorge, ich schätze Ihre Mühe! :)
Phill Duffy
4
+1 Das hat bei mir tatsächlich funktioniert.
Tamas Czinege
1
@EvoD - wahrscheinlich bekommt der lokale Hotshot hier sowieso nur seine Infos.
Thomas Dignan
36

Es lohnt sich auf jeden Fall, auf die Dokumentation zu achten

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

scrollen

Typ: Boolean
Standard: true
Wenn diese Option aktiviert isttrue , wird der Container beim Ziehen automatisch gescrollt.

Alle, die hier eintreten, lernen aus meinem Fehler, RT (F) M !!!

Phill Duffy
quelle
4
2 Stunden in der Tat verschwendet. Wir sollten wirklich RTFM
Herr
Ich hatte ein ähnliches Problem mit einem Akkordeon. Ich hatte ein Draggable innerhalb eines Akkordeon-Panels und wollte es außerhalb des Akkordeons ziehen, aber das Akkordeon-Panel hatte 'Überlauf' auf 'Auto' gesetzt und ich habe es nie geschafft, außerhalb des Akkordeons zu gelangen. Das Setzen von "scroll: false" auf dem Akkordeon hat nicht geholfen. Am Ende habe ich den in jquery-ui eingestellten Überlauf außer Kraft gesetzt. Dadurch sieht die Höhe meines Inhaltsbereichs seltsam aus, sodass ich eine bestimmte Höhe verkabeln musste. Und das hat funktioniert.
Asle G
20

Die Klonlösung funktioniert, hat aber zwei Probleme.

Erstens: Die Klone werden an den Körper angehängt. Abhängig von Ihrem CSS kann Ihr Element die Stile ändern, da es sich vor dem Start in einem anderen Element befindet und sich beim Ziehen direkt auf dem Body-Element befindet.

Zweitens: Manchmal MUSS sich das Element bewegen, und der Klon lässt das Objekt dort.

Die Lösung für diese Probleme lautet also:

$('.selector').draggable({
    helper: 'clone',
    start: function(){
        $(this).hide();             
    },
    stop: function(){
        $(this).show()
    }
});
Bruno Guaitanele
quelle
1
Perfekt! Und danke für den Hinweis zum CSS - hat mir geholfen, beide Probleme zu lösen.
Mattanja
1
Um das "ursprüngliche" Verhalten von Draggable wirklich nachzuahmen, sollten Sie die CSS-Eigenschaft "Sichtbarkeit" verwenden
mexique1
-1

Sie können auch angeben, welche Arten von Elementen Sie nicht einschließen möchten.

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

Wenden Sie diese Eigenschaft cancel an, um das Ereignis in angegebenen untergeordneten Elementen zu ignorieren

$('.draggable').draggable({cancel : 'ul'});
Colin-Higgins
quelle