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

StackOverflow https://stackoverflow.com/questions/811037

  •  03-07-2019
  •  | 
  •  

質問

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

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

貼り付けビンの例

何が起こるかというと、スクロールが増加しているだけです。スクロール可能なdiv内の目的地にドラッグしたいのに、これが望ましい動作になるのはわかりますが、スクロールグリップの範囲外にしたいのです。

役に立ちましたか？

解決 3

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

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

  

スクロール

     

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

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

他のヒント

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

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

appendTo

要素、SelectorDefault： '親'

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

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

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

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

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

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

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

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

スクロールオプションを設定しても、オーバーフロー領域での子の非表示が停止することはありません。ヘルパーオプションを使用する回避策を考え出しました。確認してください：

http://pastebin.me/164f0a4073496563fe3179ddcec5fd6d

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

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

含める必要のない要素の種類を指定することもできます。

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

このキャンセルプロパティを適用して、指定した子要素のイベントを無視します

$('.draggable').draggable({cancel : 'ul'});
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top