Droppable元素位置得到错误计算

Z时代
2024-01-10
分类：问答

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

回答：

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

回答：

这是有点不清楚你总想做什么。我会建议使用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 
     }); 
    }