Droppable元素位置计算不正确

Posted 2021-03-28

我有一个类的表：.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/将项目拖放到表中以查看问题。任何想法如何解决这一问题？

答案

你有点不清楚你要做的整体事情。我建议使用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/

另一答案

我自己找到了解决方案。有点棘手，但工作正常。关键是，我正在捕捉掉目标单元格的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;