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

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

Answer 1

从父级删除填充或按照此处所述测量填充：jQuery How to Get Element's Margin and Padding? 并从#testdiv

的边缘减去它

使用X和Y坐标定位元素

1 个答案: