Блокировать перетаскиваемый элемент от появления после другого

Question

У меня есть два перетаскиваемых элемента на одной оси x.Я хочу воспроизвести эффект слайдера, я имею в виду, что слайдер 1 не может идти после слайдера 2.

Я не знаю, как это сделать.Кто-нибудь может мне помочь?

Я использую jQuery и перетаскиваемый плагин из jQuery UI.

РЕДАКТИРОВАТЬ:

Код: HTML:

<div id="chrono-bar">
<div id="slider-left" class="slider-left draggable obstacle"></div>
<div id="slider-right" class="slider-right draggable"></div>
<ul class="chrono-bar-ul block">
    <li class="chrono-bar-item">Janvier</li>
    <li class="chrono-bar-item">Février</li>
    <li class="chrono-bar-item">Mars</li>
    <li class="chrono-bar-item">Avril</li>
    <li class="chrono-bar-item">Mai</li>
    <li class="chrono-bar-item">Juin</li>
    <li class="chrono-bar-item">Juillet</li>
    <li class="chrono-bar-item">Aout</li>
    <li class="chrono-bar-item">Septembre</li>
    <li class="chrono-bar-item">Octobre</li>
    <li class="chrono-bar-item">Novembre</li>
    <li class="chrono-bar-item last">Décembre</li>
</ul>
<div class="chrono-bar-footer">
    <div class="line"></div>
</div>

Javascript:

<script>
$("#slider-left").draggable({ 
    axis: 'x', 
    containment: 'parent',
    'snap': '#slider-right', 
    collide: 'block',
    drag: function() {
        console.log($('#slider-left').offset().left);
    }
});
$("#slider-right").draggable({ axis: 'x', containment: 'parent','snap': '#slider-left' });

Answer 1

Мое решение состояло в том, чтобы при каждом перетаскивании перетаскивать область содержания. Я делюсь с вами своим кодом:

var left = $('#chrono-bar').offset().left;
$("#slider-left").draggable({ 
    axis: 'x', 
    containment: [left,100,left+944-46,100],
    'snap': '#slider-right', 
    collide: 'block',
    drag: function() {
        $("#slider-right" ).draggable( "option", "containment", [$(this).position().left+left+46-5, 100, left+944-46, 1000] );
        autoWidth = $("#slider-right" ).position().left - $(this).position().left-46;
        $('#slider-middle-auto').css({width:autoWidth+'px', left: $(this).position().left + 46+'px'});
        $("#slider-left").css({'background-position':'0px -68px'});
    },
    stop:function(e) {
        autoWidth = $("#slider-right" ).position().left - $(this).position().left-46;
        $('#slider-middle-auto').css({width:autoWidth+'px', left: $(this).position().left + 46+'px'});
        $("#slider-left").css({'background-position':'0px 0px'});
        refreshListEvent(e);
    },
    grid : [77,77]
});
$("#slider-right").draggable({ 
    axis: 'x', 
    containment: 'parent',
    'snap': '#slider-left', 
    drag : function() {
        $("#slider-left" ).draggable( "option", "containment", [left-5, 100, $(this).position().left+left, 1000] );
        autoWidth = $(this).position().left - $("#slider-left" ).position().left - 46;
        $('#slider-middle-auto').css({width:autoWidth+'px', left: $("#slider-left" ).position().left + 46+'px'});
        $("#slider-right").css({'background-position':'0px -68px'});
    },
    stop:function(e) {
        autoWidth = $(this).position().left - $("#slider-left" ).position().left - 46;
        $('#slider-middle-auto').css({width:autoWidth+'px', left: $("#slider-left" ).position().left + 46+'px'});
        $("#slider-right").css({'background-position':'0px 0px'});
        refreshListEvent(e);
    },
    grid : [77,77]
});

$("#slider-right" ).draggable( "option", "containment", [$("#slider-left" ).position().left+left+46, 100, left+944-46, 1000] );
$("#slider-left" ).draggable( "option", "containment", [left-5, 100, $("#slider-right" ).position().left+left, 1000] );

autoWidth = $("#slider-right" ).position().left - $("#slider-left" ).position().left - 46;
$('#slider-middle-auto').css({width:autoWidth+'px', left: $("#slider-left" ).position().left + 46+'px'});

Есть некоторые ошибки, но я думаю, что это хорошее начало!

Answer 2

Ваше containment для slider-left должно быть slider-right, если вы не хотите, чтобы ползунок влево шел после ползунка вправо.Спасибо.