JQueryUI Draggable - Containment [x1, x2] 값 설정 문제

Question

[x1, y1, x2, y2] 형식을 사용할 때 jqueryUI draggable 함수의 포함 값을 설정하는 데 문제가 있습니다.

<script type="text/javascript"> 
    //slideTest.js 
    $(document).ready(function(){ 
     $('.slideMin').each(function(){ 
      $(this).draggable({ 
       containment: [$(this).parent().offset().left,$(this).parent().offset().top,$(this).next('div').offset().left,$(this).parent().offset().top] 
      }); 
     }); 
</script> 

그리고 스크립트와 상호 작용하는 HTML : I합니다 (slideMin의 DIV의) 드래그 봉쇄를 설정하려고

<div class="slideBar"> 
    <div class="slideMin"></div> 
    <div class="slideMax"></div> 
</div> 

에 따라 오프셋 (offset) 여기 JS이다. 다음 div (이 경우에는 slideMax)의 왼쪽.

즉, 드래그 할 수있는 동작이 다음 (slideMax) div의 왼쪽에 도달 할 때 (slideMin div의 경우) 멈추고 싶습니다.

x1은 드래그가 정의 된 위치에서 멈추는 것처럼 작동하는 것처럼 보입니다. 그러나 중복되지 않고 다음 div를 넘어 확장됩니다. x2 값을 설정하는 방법에 문제가있을 것입니다. 그러나 그것이 무엇인지 확실하지 않습니다.

어떤 조언이 필요합니까?

Answer 1

알아 냈어 ... 나는 둘 다 dragable했다. 첫 번째 div는 다음 div에 도달했을 때 중단되었습니다. 위의 코드는 두 div 중 하나를 드래그 할 때까지 완료되었습니다. div 중 하나를 드래그하면 다른 div의 드래그 가능한 범위가 업데이트되지 않으므로 드래그 가능한 범위가 다른 div와 겹치는 부분의 오류가 발생했습니다. 이 문제를 해결하기 위해 나는 다시 움직여야하는 div의 draggable 함수 내에서 다른 div의 드래그 가능한 범위를 다시 설정하고 설정해야했습니다.

$(this).draggable({ 
    containment: [$(this).position().left, $(this).position().top, $(this).next().position().left - $(this).width()+4, $(this).position().top], 
    drag: function(e){ 
     $(this).next().draggable({ 
      containment: [parseFloat($(this).position().left) + parseFloat($(this).width())-4, $(this).next().position().top, parseFloat($(this).parent().position().left) + parseFloat($(this).parent().width())-3, $(this).next().position().top] 
     }); 
    } 
}); 
$(this).draggable({ 
    containment: [parseFloat($(this).prev().position().left) + parseFloat($(this).prev().width())-4, $(this).position().top, $(this).position().left, $(this).position().top], 
    drag: function(e){ 
     $(this).prev().draggable({ 
      containment: [$(this).parent().offset().left-$(this).prev().width()+5, $(this).prev().position().top, $(this).position().left - $(this).prev().width()+4, $(this).prev().position().top] 
     }); 
    } 
}); 

PS, 숫자 -3 -4 +5, 등 당신이 경우, 내 드래그 된 div의 핸들 (4 개 픽셀 핸들)에 대한 간격을 추가했다 :

새로운 코드는 다음과 같이 간다 코드의 -3 ~ 4 + 5 부분을 추가로 필요로하지 않는 핸들이 없습니다.