jquery draggable : 드래그 가능한 영역을 제한하는 방법은 무엇입니까?

jquery draggable : 드래그 가능한 영역을 제한하는 방법은 무엇입니까?

---

드래그 가능한 객체 (div)와 드롭 가능한 객체 (테이블 TD)가 있습니다. 사용자가 드래그 가능한 오브젝트를 드롭 가능한 TD 중 하나로 드래그하기를 원합니다.

이 방법으로 드래그 앤 드롭 가능을 활성화합니다.

$(".draggable").draggable();
$(".droppable").droppable();

문제는 이것으로 사용자가 드롭 가능한 영역을 포함하여 화면의 아무 곳이나 div를 드래그 할 수 있다는 것입니다.

드래그 가능한 개체의 경계 영역을 제한하려면 어떻게해야합니까?

---

"containment"옵션 사용 :

jQuery UI API-드래그 가능한 위젯-포함

: 문서는 값만을 받아들이라고 'parent', 'document', 'window', [x1, y1, x2, y2]하지만 난 그게 같은 너무 '#container'로 선택을 받아 들일 것입니다 기억하는 것 같다.

---

$(function() { $( "#draggable" ).draggable({ containment: "window" }); });

이 코드는 표시되지 않습니다. 전체 코드 및 데모 : http://www.limitsizbilgi.com/div-tasima-surukle-birak-div-drag-and-drop-jquery.html

부모 내부의 요소를 제한하려면 :

$( "#draggable" ).draggable({ containment: "window" });

---

다음은 따라야 할 코드 예제입니다. #thumbnail은 #handle DIV의 DIV 상위입니다.

buildDraggable = function() {
    $( "#handle" ).draggable({
    containment: '#thumbnail',
    drag: function(event) {
        var top = $(this).position().top;
        var left = $(this).position().left;

        ICZoom.panImage(top, left);
    },
});

---

containment옵션 은 공식 문서에서 발췌 한 내용을 참조하십시오 .

봉쇄

기본: false

지정된 요소 또는 영역의 경계 내로 드래그를 제한합니다.
지원되는 여러 유형 :

• 선택기 : 드래그 가능한 요소가 선택기가 찾은 첫 번째 요소의 경계 상자에 포함됩니다. 요소가 없으면 포함이 설정되지 않습니다.
• 요소 : 드래그 가능한 요소가이 요소의 경계 상자에 포함됩니다.
• 문자열 : 가능한 값 : "parent", "document", "window".
• Array : 양식에서 경계 상자를 정의하는 배열 [ x1, y1, x2, y2 ]입니다.

코드 예제 : 지정된 옵션을 사용
하여 드래그 가능 항목을 초기화 containment합니다.

$( ".selector" ).draggable({
    containment: "parent" 
}); 

containment초기화 후 옵션을 가져 오거나 설정합니다 .

// Getter
var containment = $( ".selector" ).draggable( "option", "containment" );
// Setter
$( ".selector" ).draggable( "option", "containment", "parent" );

---

$(function () {
    $( ".droppable-area" ).sortable({
                connectWith: ".connected-sortable",
                containment: ".droppable-area", //(parent div)
                stack: '.connected-sortable div'
            }).disableSelection();
});

참조 URL : https://stackoverflow.com/questions/3237161/jquery-draggable-how-to-limit-the-draggable-area