desandro / draggabilly

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

I really need the function pause drag and continue drag with conditions #216

Closed thangnm93 closed 2 years ago

thangnm93 commented 3 years ago

Firstly I want to say thank you to you for this excellent plugin.

As my title above, I need a new method or something like that, that I can stop moving draggable if the draggable box moving out the circle.

image

Currently, I have used draggie._pointerUp(event.originalEvent, pointer); for leaving the event drag, but I don't want to leave this event, I just want to pause the mouse event moving out the circle, after that the mouse moved to inside the circle the moving draggable will works again.

Codepen: https://codepen.io/thangnm93/pen/ExNxgKZ

My condition here:

$draggables.on('dragMove', function(event, pointer, moveVector) {
    let position = $(this).data('draggabilly').position;
    if ($.limitPoint1(xCenter, yCenter, width, height, radius, position.x, position.y) ||
        $.limitPoint2(xCenter, yCenter, width, height, radius, position.x, position.y) ||
        $.limitPoint3(xCenter, yCenter, width, height, radius, position.x, position.y) ||
        $.limitPoint4(xCenter, yCenter, width, height, radius, position.x, position.y)
       ) {
        draggie._pointerUp(event.originalEvent, pointer);
      }
  });

I expected the result is:

$draggables.on('dragMove', function(event, pointer, moveVector) {
    let position = $(this).data('draggabilly').position;
    if ($.limitPoint1(xCenter, yCenter, width, height, radius, position.x, position.y) ||
        $.limitPoint2(xCenter, yCenter, width, height, radius, position.x, position.y) ||
        $.limitPoint3(xCenter, yCenter, width, height, radius, position.x, position.y) ||
        $.limitPoint4(xCenter, yCenter, width, height, radius, position.x, position.y)
       ) {
        draggie.pauseDrag(event, pointer);
      } else {
        draggie.continueDrag(event, pointer);
      }
  });

Do you have any ideas for my case? Thank you for your help.