desandro / draggabilly

:point_down: Make that shiz draggable
https://draggabilly.desandro.com
MIT License
3.86k stars 386 forks source link

Method to update position #147

Closed franciscolourenco closed 6 years ago

franciscolourenco commented 7 years ago

Would be useful to have a method to set the position programatically.

Related to #146

desandro commented 7 years ago

You can set position with left/top CSS. See demo http://codepen.io/desandro/pen/mRQdwZ

// jQuery
$draggable.css({
  left: 200,
  top: 100
});

// vanilla JS
dragElem.style.left = '200px';
dragElem.style.top = '100px';
franciscolourenco commented 7 years ago

The problem is Dragabilly.position becomes out of sync

cmalven commented 7 years ago

You have to both set the CSS position and manually update the draggable. This worked for me:

draggable.position.x = newPosition;
draggableEl.style.left = newPosition + 'px';

That being said, the fact that you have to do what feels like reaching into the Draggable internals to do this (and seems pretty fragile) makes me think a method to do this should be built in.

franciscolourenco commented 7 years ago

@cmalven ;)

So this issue is a proposal for an abstraction which allows you to update both at once.

Either with setters:

draggable.position = {x, y}
// or
draggable.position.x = x
draggable.position.y = y

Or with a method

draggable.setPosition(x, y)

Or both

desandro commented 7 years ago

How about:

// add this code
Draggabilly.prototype.setPosition = function( x, y ) {
  this.position.x = x;
  this.position.y = y;
  this.setLeftTop();
};

// then you can use setPosition method
draggie.setPosition( 200, 100 )

See demo http://codepen.io/desandro/pen/qRQYYB

Add a 👍 reaction if you would like to see this feature added to Draggabilly.

mubaidr commented 7 years ago

Works fine! Thank you! 👍

desandro commented 6 years ago

🎉 Draggabilly v2.2.0 has been released new setPosition method added. 🎉

Please update! Closing this feature request as resolved. Please open a new issue if you run into trouble with setPosition. Thanks all for the feedback!