使用 X 和 Y 坐标定位元素答案

【问题标题】：Position an element using X and Y coordinates使用 X 和 Y 坐标定位元素
【发布时间】：2016-06-15 21:08:04
【问题描述】：

我是 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'});

但这是设置填充，并没有把它放在正确的位置。如何使用 data-x 和 data-y 来定位 div/image？

【问题讨论】：

他们使用transform: translate()来定位它，而不是top/left，完全不一样

标签： javascript jquery html css interact.js

【解决方案1】：

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

【讨论】：