JqueryUI、大きなテーブルを含むスクロール可能なdivのセルに要素をドラッグ

Question

ドラッグアンドドロップの問題があります。

私はいつもドラッグしている要素を見たいと思っています。特定のdivをスクロールして、テーブルの任意のセルに要素をドロップできるようにしたいと思います。私はまた、任意のdivから任意のdivに要素をドラッグできるようにしたい。

この例はほとんど問題なく動作します。私の最後の問題は、セルhoverClassのプロパティに関するものです。「コンテナB」の境界線の近くにある「コンテナA」から要素をドラッグしているとき、テーブルにナビゲートして任意のセルに到達するオートスクロール動作を実装しました。しかし、スクロールシミュレーションの後、hoverClassは右のセルには適用されません。しかし、要素は常に右のセルにドロップされます。

https://jsfiddle.net/Bouillou/QvRjL/434/

私のアプローチは正しいですか？

EDIT

は私が回避策を見つけました。アイデアは、ヘルパー構築コールバック中にスクロール可能なコンテナに要素のクローンを追加し、1ms後にsetTimeout関数を使用してヘルパーを本文に追加することです。ヘルパーの位置は、オフセットの問題を避けるために、マウスの位置にマップする必要があります。私はそれを行うための最善の方法を開発することが可能であることを確信しているhttps://jsfiddle.net/Bouillou/QvRjL/434/

：

は、ここに私の最終的な解決策です。

Answer 1

明らかに私の更新は唯一の解決策です。

今月は問題なく動作しています。

回避策が見つかりました。このアイデアは、スクロール可能なコンテナにヘルパー構築コールバックの間に要素クローンを追加し、1ミリ秒後にsetTimeout関数を使用してヘルパーを本文に追加することです。ヘルパーの位置は、オフセットの問題を避けるために、マウスの位置にマップする必要があります。ここで

は私のソリューションです：http://jsfiddle.net/QvRjL/134/

$('[id^="drag-"]').each(function() { 
    $(this).draggable({ 
     opacity: 0.7, 
     cursorAt: { top: 15, left: 50 }, 
     appendTo: 'body', 
     containment: 'body',   
     scroll: true, 
     helper: function(){ 
      //Hack to append the cartridge to the body (visible above others divs), 
      //but still bellonging to the scrollable container 
      $('#container').append('<div id="clone" class="cartridge">' + $(this).html() + '</div>'); 
      $("#clone").hide(); 
      setTimeout(function(){ 
       $('#clone').appendTo('body'); 
       $("#clone").show(); 
      },1); 
      return $("#clone"); 
     }  
    }); 
});​ 

Answer 2

あなたがスクロールした後、私は、正しくundestand場合、highlitedcellsが正しいものではない..です

は、それはあなたのコンテナ要素からハイライトが、その後テーブル要素内のデポジションを複製するために、細胞をcalcualtesように私には思えます。

バシリーでは、「コンテナ2」からのマウスのオフセットをチェックしてから、セルをオフセットでハイライトしますが、テーブル 't'の位置から確認します。

オフセットの代わりにポジションを使用してください。そしてhttp://api.jquery.com/offset/、

に述べ.offset（）メソッドは、文書に対する 要素の現在位置を取得するために、私たちを可能にします。これを.position（）と比較すると、オフセット親に対する現在の位置を取得する が得られます。

Personnaly私は単純にセルにcssクラスを適用し、css：hoverを使用します。 /編集：それを行う必要がある唯一の理由は、セルをハイライトすることです..多分あなたは他のものもトリガしたい場合。