jquerryUI draggable 사용자 정의

Question

jqueryUI의 드래그 가능한 위젯을 사용하고 싶지만 객체가 위, 왼쪽 및 오른쪽의 브라우저 창에 바인딩되도록 제한하십시오.

그러나 객체의 30 픽셀 밖에 볼 수 없을 때까지 객체가 창 아래로 드래그 할 수 있도록 허용하고 싶습니다. 그 시점에서 나는 아래로 끌어 내려는 것이 더 이상 허용되지 않도록하고 싶습니다. 따라서 객체의 최소 30 픽셀을 항상 볼 수있게하여 나중에 다시보기로 드래그하는 것이 쉽습니다.

플러그인을 사용하여 제약 조건에이 유형을 정의 할 수 있습니까? 그렇다면 어떻게해야합니까?

Answer 1

드래그 가능한 위젯에는 드래그 가능한 요소를 드래그 할 수있는 제한을 제한하는 데 사용할 수있는 containment 옵션이 있습니다. 그 옵션 값의 배열을 걸릴 수 있으므로이 같은 트릭을 수행해야합니다

$("#example").draggable({ 
    containment: [0, 0, document.width, document.height - 70] 
}); 

가 여기에 위의 working example입니다. 이 예에서 draggable 요소는 100px 높이이므로 70을 document.height에서 뺍니다.