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.

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:

I tryed to play with onMouseMove event, but looks like displace init cords of element after that event var scale = /* get the scale */ x = event.pageX / scale, y = event.pageY / scale;

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

catccommented, May 29, 2019

So I investigated a few possible solutions for this issue - unfortunately though, the solution is not really simple. Since the purpose of this library was to be a simple microlibrary, I don’t think it makes sense to add a bunch of extra support for a pretty rare edge use case.

I’d suggest to just fork the library and implement support for scaling yourself - it shouldn’t be too difficult to do:

// on add scale support
let wOff = e.clientX - el.offsetLeft * YOUR_SCALE;
let hOff = e.clientY - el.offsetTop * YOUR_SCALE;

// and then in the custom move function when initializing
const opts = {
	customMove: function(el, x, y) { = x / YOUR_SCALE + 'px'; =  y / YOUR_SCALE + 'px';

There’s a couple other minor edge cases - like having to customize constrain clamping to reflect the new scale in the customMove fn.

Gonna close this issue for now, but feel free to ask any other questions.

catccommented, May 25, 2019

Not sure yet - might add a custom override function you can provide that overrides the 1:1 translate to your own custom ratio.

Read more comments on GitHub >

github_iconTop Results From Across the Web

scale() - CSS: Cascading Style Sheets - MDN Web Docs
The scale() CSS function defines a transformation that resizes an element on the 2D plane. Because the amount of scaling is defined by...
Read more >
CSS 2D Transforms - W3Schools
The scale() method increases or decreases the size of an element (according to the parameters given for the width and height). The following...
Read more >
scale - CSS-Tricks
The scale property in CSS resizes an element's width and height in proportion. So, if we have an element that's 100 pixels square, ......
Read more >
Scale Transform Conference - The Future of AI & Machine ...
Transform, Scale AI's first-ever conference, brought together an all-star line-up of 27 of the leading AI researchers and practitioners.
Read more >
"transform:scale" | Can I use... Support tables for HTML5 ...
CSS3 2D Transforms ... Method of transforming an element including rotating, scaling, etc. Includes support for transform as well as transform-origin ...
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 Post

No results found

github_iconTop Related Hashnode Post

No results found