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元素位置得到错误计算

回答

相关问题