Продолжить перетаскивание события без перетаскивания элемента дальше произвольного порога

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 через $(...).css({left: ...}) не работает, и, возможно, этого не должно быть.

Так как же я могу решить это? Как я могу разрешить перетаскивание без необходимости выпускать и захватывать маркер раз в то время, когда они иногда подходят к другому маркеру?

codepen: 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 ,, надежда, что может быть какой-то помощи,

веселит, к

Answer 2

вы должны изменить ваше заявление, если к этому, и избавиться от 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; 
    } 
}