Position an element using X and Y coordinates

Question

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?

They use transform: translate() to position it, not top/left, which is not at all the same — Asons
– Asons, Commented Jun 15, 2016 at 21:17

Community · Accepted Answer · 2017-05-23 12:24:17Z

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

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Jun 15, 2016 at 21:21

grateful

1,13814 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Position an element using X and Y coordinates

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related