继续拖动事件而不将元素拖动到任意阈值以上

Question

I have an element with two markers over it. The first marker sets minimum value of something, and the second, maximum. That said, I want to prevent the "maximum" one be lower than "minimum" one. I'm using jQuery UI's draggable as a wrapper around HTML5 drag and drop, and here's my code:

component = {}; // actually, it's a real component but let's pretend it's simply a plain-object.
component.containerWidth = $('.marker').parent().width();

$('.marker').each(() => {
  $(this).draggable({
    containment: 'parent',
    axis: 'y',
    create: (event, ui) => {
      if ($(this).hasClass('min')) {
        component.minMarker = $(this).position().top;
      } else if ($(this).hasClass('max')) {
        component.minMarker = $(this).position().top;
      }
    },
    drag: (event, ui) => {
      const isDraggingMin = $(this).hasClass('min');
      const isDraggingMax = $(this).hasClass('max');
      const isMinLower = ui.position.top + $(this).height() <= component.maxMarker;
      const isMaxHigher = ui.position.top - $(this).height() >= component.minMarker;

      if (isDraggingMin && isMinLower) {
        // set actual markers' positions
        // do something
      } else if (isDraggingMax && isMaxHigher) {
        // set actual markers' positions
        // do something
      } else {
        event.preventDefault();
      }
    }
  });
});

The problem is that, when preventDefault gets invoked, the dragging doesn't work anymore until I stop dragging and start it over. It means, if I drag a "minimum" marker as close to "maximum" marker as event.preventDefault() gets fired, then no matter how and where I drag, the marker stays. If I release it and then start dragging again, it drags until it gets into the same conditions.

Simply setting css properties via $(...).css({left: ...}) does not work, and perhaps it shouldn't.

So how do I solve it then? How can I allow dragging without having user to release and grab a marker once in a while when they occasionally approach another marker?

The codepen: http://codepen.io/rishatmuhametshin/pen/WrvoKd

Answer 1

I have some other thing in mind for you,, see this code and I hope that can fit in your need,, or at least can help you to see this through another lens (I'm wearing glasses btw :)

http://codepen.io/mkdizajn/pen/bEdgLQ?editors=001

in place for that preventDefault call I used this peace of code:

$(event.target).css('top', $(event.target).data('startpos') )

in relation to:

$(event.target).data('startpos', ui.position.top);

My idea was to track start/stop evt and to do some stuff there,, you can see and read my comments on codepen,, hope that can be of some help,

cheers, k

Answer 2

You need to change your if statement to this, and get rid of the preventDefault:

if ( draggingMin ) {
  if ( isMinLower ) {
    component.minPosition = ui.position.top;
  } else {
    ui.position.top = component.minPosition;
  }
} else if (draggingMax) {
  if( isMaxHigher ){
    component.maxPosition = ui.position.top;
  } else {
    ui.position.top = component.minPosition;
  }
}