继续拖动事件，而不拖动超过任意阈值的元素

Question

我有一个元素，上面有两个标记。第一个标记设置某个元素的最小值，第二个标记设置最大值。也就是说，我想防止"最大"一个低于"最小"一个。我使用jQueryUI的draggable作为HTML5拖放的包装器，下面是我的代码：

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();
      }
    }
  });
});

问题是，当调用preventDefault时，拖动将不再工作，直到我停止拖动并重新启动它。这意味着，如果在event.preventDefault()被激发时，我将"最小"标记拖动到接近"最大"标记的位置，那么无论我如何拖动，标记都会保持不变。如果我释放它，然后再次开始拖动，它就会拖动，直到达到相同的条件。

简单地通过$(...).css({left: ...})设置css属性是行不通的，也许也不应该。

那么我该怎么解决呢？当用户偶尔接近另一个标记时，我如何允许拖动，而不需要用户偶尔释放和抓取一个标记？

代码笔：http://codepen.io/rishatmuhametshin/pen/WrvoKd

Answer 1

我还有其他事情要做，看看这个代码，我希望它能满足你的需求，或者至少能帮助你通过另一个镜头看到它（顺便说一句，我戴着眼镜：）

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

在那个preventDefault调用中，我使用了这个代码：

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

关于：

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

我的想法是跟踪开始/停止evt，并在那里做一些事情，你可以看到并阅读我在codepen上的评论，希望这能有所帮助，

欢呼，k

Answer 2

您需要将if语句更改为这个，并去掉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;
  }
}