Question

我有一个元素，上面有两个标记。第一个标记设置某个东西的最小值，第二个标记设置最大值。也就是说，我想阻止＆＃34;最大的＆＃34;一个低于＆＃34;最低＆＃34;一。我使用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被调用时，拖动不再起作用，直到我停止拖动并重新开始。这意味着，如果我拖动一个＆＃34;最小值＆＃34;标记尽可能接近＆＃34;最大值＆＃34;标记为event.preventDefault()被触发，然后无论我拖动的方式和位置，标记都会停留。如果我释放它然后再次开始拖动，它会拖动它直到它进入相同的条件。

只需通过$(...).css({left: ...})设置css属性不起作用，也许不应该这样做。

那我该怎么解决呢？如果偶尔接近另一个标记，我怎样才能允许拖动而无需用户释放并偶尔抓取标记？

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

Answer 1

我还有其他一些想法，请参阅此代码，我希望能满足您的需求，或者至少可以帮助您通过另一个镜头看到这一点（我戴着眼镜顺便说一下：）< / p>

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语句更改为this，并删除preventDefault：

10^-3

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

2 个答案: