javascript - 使用 X 和 Y 坐标定位元素

Question

我是 Javascript 的新手，我正在使用 InteractJS 进行简单的拖放，将较小的图像拖到较大的图像上。在每个拖动移动事件中，他们使用以下函数:

 function dragMoveListener (event) {
    var target = event.target,
        // keep the dragged position in the data-x/data-y attributes
        x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
        y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

    // translate the element
    target.style.webkitTransform =
    target.style.transform =
      'translate(' + x + 'px, ' + y + 'px)';

    // update the posiion attributes
    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);

我假设设置的 data-x 和 data-y 属性是刚刚删除的元素的位置。但是，我希望能够在那个位置重绘一个元素。我尝试了以下方法:

var parent = event.currentTarget;
               var xCoord = parent.getAttribute('data-x');
               var yCoord = parent.getAttribute('data-y');
                $("#testDiv").css({top: parseInt(xCoord + event.dx, 10), left: parseInt(yCoord + event.dy, 10), position: 'absolute'});

但是这是设置padding，并没有放在正确的位置。如何使用 data-x 和 data-y 定位 div/图像？

Answer 1

移除父级的填充 或按照此处所述测量填充:jQuery How to Get Element's Margin and Padding? 并从#testdiv 的边距中减去它