阻止可拖動元素出現在另一個

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如果您不希望滑塊左移後滑塊右移。謝謝。