search

taye / interact.js

JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE9+)
http://interactjs.io/
MIT License
12.32k stars 783 forks source link

I have text in a canvas and want to re-position inside a canvas, co-ordinates x & y is working but right and bottom is not working #991

Open atifqadeer opened 1 year ago

atifqadeer commented 1 year ago

interact("div.mockup").draggable({ inertia: false, autoScroll: true, onmove: dragMoveListener, modifiers: [ interact.modifiers.restrictRect({ restriction: document.querySelector('#sence'), endOnly: true, }) ] }) interact(mockup1).draggable({ inertia: false, autoScroll: true, onmove: dragMoveListener, modifiers: [ interact.modifiers.restrictRect({ restriction: document.querySelector('#sence'), endOnly: true, }) ] })

 function dragMoveListener (event) {
  var target = event.target,
      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);
}