web-dev-qa-db-ja.com

jQueryのドラッグ可能およびオーバーフローの問題

オーバーフローとして設定されているコンテナdivからdivをドラッグすると、望ましくない効果があります：scroll。

他の誰かが問題を抱えている例を見つけましたが、解決策を見つけることができませんでした

貼り付けビンの例

スクロールが増加するだけです。スクロール可能なdiv内の目的地にドラッグしたいのに、これが望ましい動作になる理由がわかりますが、スクロールグリップの外にそれを取りたいです。

jquery-uidrag-and-drop
73
Phill Duffy

ドキュメントに注意を払うことは確かに有益です

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

scroll

タイプ：ブール
デフォルト：true
trueに設定すると、ドラッグ中にコンテナが自動スクロールします。

ここに入るすべての人、私の間違い、RT（F）Mから学びます!!!

34
Phill Duffy

2つのオーバーフロー自動div間のドラッグを有効にする同様の問題がありました。以前の回答の助けを借りて、私はこの組み合わせが私のために働くことがわかりました（Safari 5.0.3、jquery-1.4.4、jquery-ui-1.8.7）：

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

appendTo

Element、SelectorDefault： 'parent'

AppendToオプションに渡されるか、appendToオプションによって選択された要素は、ドラッグ中にドラッグ可能なヘルパーのコンテナーとして使用されます。デフォルトでは、ヘルパーはドラッグ可能オブジェクトと同じコンテナに追加されます。

コード例appendToオプションを指定して、ドラッグ可能を初期化します。

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

クローンソリューションは動作しますが、2つの問題があります。

最初：クローンがボディに追加されます。 cssに応じて、要素はスタイルを変更できます。開始前は別の要素の内部にあり、ドラッグ中はbody要素に直接配置されるためです。

2番目：時々要素が移動しなければならず、クローンはそこにオブジェクトを置きます。

したがって、この問題の解決策は次のとおりです。

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

スクロールオプションを設定しても、オーバーフロー領域での子の非表示は停止しません。ヘルパーオプションを使用する回避策を考え出しました。見てみな：

http://Pastebin.me/164f0a4073496563fe3179ddcec5fd6d

また、私が作成した別の投稿への参照もあります：

jdiv uiドラッグ可能な要素はスクロールdivの外側で「ドラッグできない」

2
Justin Bull