Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

get Draggable Snap Distance before onThrowComplete

Recommended Posts

I have a draggable instance that snaps to y position based on an array.

I would like to send out a global event onDragEnd as to what the final snapped position would be.


I 'm using this approach, which currently is a little buggy, but I can probably make it more robust.

Is there a more elegant method?


const closest = (array, num) => {

    let i = 0;

    let minDiff = 1000;

    let ans;

    for (i in array) {

        let m = Math.abs(num - array);

        if (m < minDiff) {

            minDiff = m;

            ans = array;



    return ans;





onDragCompleteY(e) {

    let y = e.layerY;

    let arr = this.generateSnapDistances();

    let finalNum = closest(arr, y);

    let SNAPPED_INDEX = arr.indexOf(finalNum);


Link to comment
Share on other sites

Having trouble understanding the code. In the future please try to make a demo. 


When you have throwProps:true your Draggable instance has access to a tween property which represents the ThrowProps tween that is created.

If I understand the question properly, you can advance that tween to a progress(1), grab the x value and then restart the tween. 

Draggable.create("div", {  snap:[100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200],
onDragEnd:function() {
    console.log("onDragEnd and this end x =", this.x)
  onThrowComplete:function() {
    console.log("onThrowComplete and this x =", this.x);
  • Like 2
Link to comment
Share on other sites

Actually, it's even easier; Draggable has an "endX" property that it'll populate for you onDragEnd when you've got throwProps enabled :)

onDragEnd: function() {
   console.log(this.endX); //BOOM


  • Like 2
Link to comment
Share on other sites

I didn't know that. I gotta start reading the documentation more.


I usually leave reading the manual for anything as a last resort when I'm really desperate.  :lol:  

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.