ドロップ可能な要素の位置が正しく計算されない

Question

私は、クラスが.screensのテーブルを持っています。そのセルはドロップ可能です。私はセル内のリストから項目をドラッグできます。私はまた、ユーザーが正しい場所に表示されるようにアイテムをドロップした場所を計算しようとしています。しかし、ユーザーが最初のアイテム以外のセルにアイテムをドロップしようとすると、ドロップ位置が正しく計算されないという問題があります。この計算のコードは次のとおりです。

var pos = ui.draggable.offset(), dPos = $(this).offset(); 
var droppedTop = ui.position.top - $(this).offset().top + $('#mainContainer').scrollTop(); 
var droppedLeft = ui.position.left - $(this).offset().left + $('#mainContainer').scrollLeft(); 

次に、ドロップされたアイテムにこれらの左上の位置を割り当てます。このコードは、テーブルは存在しませんが、divのみの場合は完全に機能します。ここにフィドルがあります：https://jsfiddle.net/vaxobasilidze/moafzcx8/2/アイテムをテーブルにドラッグアンドドロップして問題を確認します。任意のアイデアをどのようにこれを修正するには？

Answer 1

私は解決策を自分自身を発見しました。リトルトリッキーしかし、うまく動作します。ポイントは、私はドロップターゲットセルのXとYのインデックスをキャッチしているし、それらの前に各セルの幅と高さが何であるかを調べて、この値をドロップ位置に追加します。ここでは、この操作のためのコードは次のとおりです。次に

var cellIndexX = event.target.cellIndex; 
var cellIndexY = event.target.parentNode.rowIndex; 
var positioningX = cellIndexX*($('#0-0').width()); 
var positioningY = cellIndexY*($('#0-0').height()); 

このようpositionXとpositionYを追加します。あなたが `＃のmainContainer`を持っていない

var pos = ui.draggable.offset(), dPos = $(this).offset(); 
var droppedTop = ui.position.top - $(this).offset().top + $('#mainContainer').scrollTop()+positioningY; 
var droppedLeft = ui.position.left - $(this).offset().left + $('#mainContainer').scrollLeft()+positioningX; 

Answer 2

全体的に何をしようとしているのかは少し不明です。 jQuery UI .position()を使用して、項目をセルに配置することをお勧めします。あなたのdropでこれを考えてみましょう：

var $dz = $(this); 
    var fCount = $dz.find(".foo").length; 
    var $item = ui.draggable.appendTo($dz); 
    var padTop = 5; 
    if (fCount === 0) { 
     $item.position({ 
     my: "center top", 
     at: "center top+" + padTop, 
     of: $dz 
     }); 
    } else { 
     var jump = fCount * 42; 
     $item.position({ 
     my: "center top", 
     at: "center top+" + (jump + padTop), 
     of: $dz 
     }); 
    } 

これはアイテムを追加しても、細胞内でそれを配置します。利点は、それが親セルに対してアイテムを容易に位置付け、オフセットなどを扱う必要がないことである。

の作業例：https://jsfiddle.net/Twisty/bwpcph7z/4/