question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

dragging in scaled elements

See original GitHub issue

What happens: When the draggable element is child of a scaled element (like transform: scale(2);) the draggable element has an offset while dragging: It moves faster (scale>1) or slower (scale<1)than the cursor. What should/could happen: Even if it is child of a scaled element, the draggable element could be normally draggable.

Use cases: Applications in which Elements are arranged; adjustment of element size to available space.

Existing Implementations: jsPlumb uses a model in which the programmer registers changes of the scale factor of the container element: https://jsplumbtoolkit.com/doc/zooming.html

Issue Analytics

  • State:closed
  • Created 9 years ago
  • Comments:17 (5 by maintainers)

github_iconTop GitHub Comments

9reactions
tayecommented, Dec 20, 2014

I’ve been thinking about transformations for a while (#90) but I’ve been unsure of the best way to go about it. Initially I was planning on having a method that takes an object similar to the DOMMatrix/SVGMatrix but that might be too complicated. I don’t know how useful it would be useful to consider translation and rotation. I’ll try a few things out and then get back to you on that.

For now, you’d have to divide the event coordinates by the scale values.

interact(target).on('dragmove', function (event) {
  var scale = /* get the scale */
      x = event.pageX / scale,
      y = event.pageY / scale;

  // use x and y instead of event.pageX and event.pageY
});
2reactions
gavrochelegnoucommented, Jun 2, 2015

For the record, I think gsap is the only library i know to get it right : http://codepen.io/gavrochelegnou/pen/KpWVqo

Read more comments on GitHub >

github_iconTop Results From Across the Web

Dragging elements on a scaled div - javascript
Basically, I am trying to allow the dragging of an element that is on a scaled div container. The following methods work okay...
Read more >
Draggable with css scaling - GSAP
We have a draggable grid that may be larger than the user's current viewport. When they start to drag, we are scaling the...
Read more >
Options for moving and resizing an element
The first way is to use the top and left coordinates of the element to specify position, and the element's width and height...
Read more >
1418809 - Dragging and dropping of scaled elements is awkward
Attached is a file to reproduce the issue. Actual results: Dragged element gets unexpectedly resized and/or misplaced under the mouse pointer. The behavior ......
Read more >
interact.js - JavaScript drag and drop, resizing and multi-touch ...
You can drag elements, draw on a canvas or (if you really need to) scroll the page. Have a look at the demos...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found