How to manually stop dragging?

How to leave the event if a given condition is reached?

example:

$('#element').draggabilly({
   containment: true,
   axis: 'x'
}).on('dragMove', function() {
   let containerWidth = $(this).parent().width()
   let buttonWidth = $(this).outerWidth()
   let max = (containerWidth - buttonWidth) - 1 // count border right (1px)
   // condiction
   if ( $(this).position().left >= max ) {
       console.log('limit reached')
       return false // escape here!!! don't escaped!
   }
}).on('dragEnd', function() {
   let containerWidth = $(this).parent().width()
   let buttonWidth = $(this).outerWidth()
   let max = (containerWidth - buttonWidth) - 1 // count border right (1px)
   // confirm condiction
   if ( $(this).position().left >= max ) {
       // do stuff...
   } else {
       // do stuff...
   }
}).on('click', function() {
   //...
})

I’m assuming that return on “move” would trigger “end”? Is there a correct method?

[desandro]

Thanks so much for you description and CodePens!

Bad news there is no good API to manually stop dragging. Good news is that you can hack it by calling a private method _pointerUp within dragMove:

var $submitBtn = $('#submit-btn').draggabilly({
   containment: true,
   axis: 'x'
})

var draggie = $submitBtn.data('draggabilly');

$submitBtn.on('dragMove', function( event, pointer ) {
   let containerWidth = $(this).parent().width()
   let buttonWidth = $(this).outerWidth()
   let max = (containerWidth - buttonWidth) - 1 // count border right (1px)
   // condition
   if ( draggie.position.x >= max ) {
       draggie._pointerUp( event.originalEvent, pointer );
   }
})

See demo https://codepen.io/desandro/pen/RxJrra/

---

Add a 👍 reaction to this issue if you would like to see Draggabilly get a dragStop method added. Do not add +1 comments — They will be deleted.

[desandro]

Draggabilly v3 has been released with revised dragEnd method. Use it to stop dragging

// jQuery
$draggable.draggabilly('dragEnd')
// vanilla JS
draggie.dragEnd()