2

I'm very new to Javascript and I am using InteractJS to make a simple drag and drop of dragging smaller images onto a bigger image. On every drag move event they use the following function:

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

I am assuming that the data-x and and data-y attributes that are set are the position of the element that was just dropped. However, I want to be able to redraw an element in that position. I tried the following:

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

But this is setting the padding and does not put it in the right position. How can I use the data-x and data-y to position a div/image?

unconditionalcoder
  • 723
  • 1
  • 13
  • 25
  • They use `transform: translate()` to position it, not `top`/`left`, which is not at all the same – Asons Jun 15 '16 at 21:17

1 Answers1

0

Remove the padding from the parent or measure the padding as described here: jQuery How to Get Element's Margin and Padding? and subtract it from the margin of your #testdiv

Community
  • 1
  • 1
grateful
  • 1,128
  • 13
  • 25