Droppable元素位置得到錯誤計算

我有一個類與表：.screens，它的單元格是可放下的。我可以從單元格的列表中拖動任何項目。我還試圖計算用戶放棄物品的位置，以便它出現在正確的位置。但是有一個問題，如果用戶試圖刪除除第一個單元格以外的任何單元格中的項目，則放置位置得到錯誤計算。這裏是我的這種計算代碼：Droppable元素位置得到錯誤計算

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/將項目拖放到表中以查看問題。任何想法如何解決這一問題？

來源

2017-12-18 Vaxo Basilidze

你沒有'＃mainContainer'。 –

@AndyG我已經修復了在小提琴中，但它不起作用。 #mainContainer（現在#mainDiv）是此表的父項，可能會滾動。 –

將$（'。screenContainer'）。droppable（....）更改爲$（'。screens'）。droppable（....）。這將根據整個.screens容器設置頂部和左側位置，而不是單個.screenContainer元素。 –

我找到了解決自己。有點棘手，但工作正常。重點是，我捕捉放置目標單元格的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這樣的：

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;

來源

2017-12-20 10:54:57

這是有點不清楚你總想做什麼。我會建議使用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/

來源

2017-12-18 20:05:45 Twisty

謝謝你的回覆。相當接近，但我需要將丟棄的物品拖放到任何地方，因爲它在我的小提琴中。我的代碼中唯一的問題是定位。放置位置通過放置的「.screenContainer」中的偏移量進行計算，但是項目會顯示在第一個單元格中，並顯示正確的單元格放置位置。與此同時，儘管被拖拽的地方，它仍然是被丟棄的單元格的孩子。如何修復這個bug，當被丟棄的項目出現在第一個單元格中時？ –

@VaxoBasilidze工作示例顯示這可以完成，將項目從一個單元移動到另一個單元。它還解決了追加問題和定位問題。 – Twisty

找到了一個解決方案，畢竟有點棘手但很容易。檢查我的答案。 –

Droppable元素位置得到錯誤計算

回答

相關問題