web-dev-qa-db-ger.com

jQuery-Benutzeroberfläche zum Festlegen der ziehbaren Eindämmungsoption für das übergeordnete Element

Die Draggable-Interaktion der jQuery-Benutzeroberfläche verfügt über eine Nice-Eigenschaft, um das Containment festzulegen als übergeordnetes Element. 

$( ".selector" ).draggable({ containment: 'parent' });

Ich möchte die Eindämmung als Elternteil der Eltern festlegen. Es gibt keinen String-Wert, um dies zu erreichen, da String die Optionen sind 

'Eltern', 'Dokument', 'Fenster', [x1, y1, x2, y2]

Ich könnte x1, y1, x2, y2 des übergeordneten Elements beim Laden der Seite berechnen und diese Werte verwenden, um Grenzen für einen Container relativ zum Dokument festzulegen. Die Containerposition kann sich jedoch relativ zur übergeordneten Position des übergeordneten Elements ändern, wenn die Größe des Fensters nach dem Laden der Seite geändert wird. Die native 'parent'-Option behält das ziehbare Element innerhalb des übergeordneten Elements bei, unabhängig von der Fenstergröße.

Gibt es eine Möglichkeit, diese verschiebbare Eindämmung mit dem übergeordneten Element des Elternteils durchzuführen? .

jqueryjquery-uijquery-ui-draggable
14
steampowered

Gemäß der documentation kann die Option containment auch ein Jquery-Selektor oder ein tatsächliches Element sein. So kannst du das machen:

$('.selector').draggable({
    containment: $('.selector').parent().parent()
});

Oder noch besser:

$('.selector').each(function(){
    $(this).draggable({
        containment: $(this).parent().parent()
    });
});
21
rossipedia

Laut den Dokumenten müssen Sie nicht müssen einen String für die containment-Eigenschaft übergeben. Sie können Folgendes übergeben:

Selector, Element, String, Array

Wählen Sie einfach das übergeordnete Elternteil mit jQuery (d. H. $( ".selector" ).parent().parent()) aus und übergeben Sie es anstelle von 'parent'.

4
wsanville

Wenn ich $(this).parent() verwende, gehe mein Element über das übergeordnete Element.

$('.selector').draggable({
  containment: $(this).parent()
});

Aber mit parent funktioniert es gut.

$('.selector').draggable({
  containment: "parent"
});
0
Druta Ruslan

Das funktioniert auch gut:

$('.selector').draggable({
    containment: "#parent",
    scroll: false
});
0
LABASTIE François