web-dev-qa-db-ja.com

jQueryUI親の親にドラッグ可能な包含オプションを設定する方法

JQuery UI Draggableインタラクションには、親として 包含を設定 のNiceプロパティがあります。

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

封じ込めを親の親として設定したいと思います。文字列のオプションは次のとおりであるため、これを実現するための文字列値はありません。

'親'、 'ドキュメント'、 'ウィンドウ'、[x1、y1、x2、y2]

ページの読み込み時に親の親のx1、y1、x2、y2を計算し、それらの値を使用して、ドキュメントに関連するコンテナーの境界を設定できます。ただし、ページの読み込み後にウィンドウのサイズが変更された場合、コンテナの位置は親の親の位置を基準にして変更される可能性があります。ネイティブの「親」オプションは、ウィンドウのサイズ変更に関係なく、ドラッグ可能な要素を親要素内に保持します。

親の親を使用してこのドラッグ可能な封じ込めを実現する方法はありますか？ 。

jqueryjquery-uijquery-ui-draggable
14
steampowered

documentation のように、containmentオプションはjqueryセレクターまたは実際の要素にすることもできます。だからあなたはこれを行うことができます：

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

またはさらに良い：

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

ドキュメントによると、する必要がありますcontainmentプロパティの文字列を渡さないでください。次のいずれかを渡すことができます。

_Selector, Element, String, Array
_

したがって、jQueryを使用して親の親を選択し（つまり、$( ".selector" ).parent().parent()）、_'parent'_の代わりに渡します。

4
wsanville

$(this).parent()を使用する場合、私の要素は親要素を調べます。

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

しかし、parentを使用すると問題なく動作します。

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

これも正常に機能します。

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