창 가장자리 위로 드래그하지 마십시오

Question

두 개 이상의 겹치는 div가 있습니다. . 초는 .first를 넘었습니다. 각각 너비와 높이가 모두 전체 창을 차지합니다.

.second 당신의 오른쪽 가장자리를 넘어 가고 .second 방지하기 위해 좁은 방

내가 좋아하는 것 드래그 기능을 통해 드래그 할 부분을 클릭 할 수 있도록 position: absolute; left: -800px; 의 속성이 있습니다 프레임 및/또는 왼쪽으로 -800 픽셀 이상 이동하십시오.

Answer 1

다음은 배열에서 jquery와 드래그 가능한 containment 옵션을 사용하는 방법의 예입니다. 배열은 4 개의 숫자를 취합니다. 처음 2 개의 숫자는 경계 상자의 왼쪽 위 모서리를 정의하고 마지막 2 개의 숫자는 경계 상자의 오른쪽 하단 모서리를 정의합니다.

따라서 아래 예에서 요소 왼쪽에있는 최소 길이는 0px이고 최대 왼쪽 길이는 400px입니다. 최소 CSS 상단은 10px이고 최대 CSS 상단은 200px입니다.

기본적으로 배열의 값을 필요에 맞게 조정하면됩니다.

var index1 = 10; 
 

 
$('#test').draggable({ 
 
    containment: [0, index1, $('body').width()/4, 200] 
 
}); 
 

 
// update option containment after a window resize 
 
$(window).resize(function() { 
 
    $("#test").draggable("option", "containment", "parent"); 
 
});

body{ 
 
height: 350px; 
 
} 
 

 
#test{ 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 2px solid #000; 
 
    background: gray; 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 

 
<div id="test"></div>