繼續拖動事件而不將元素拖動到任意閾值以上

Question

我有一個上面有兩個標記的元素。 第一個標記設置某物的最小值，第二個標記設置最大值。 也就是說，我想防止“最大值”低於“最小值”。 我使用 jQuery UI 的可拖動作為 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;
  }
}