HTML Body/Div/Everything에서 드래그

Question

나는 이렇게 드래그 할 수있는 요소 클래스를 만듭니다

jQuery(".drag").draggable();

jQuery(".drop").droppable({
accept: ".drag",

drop: function(ev, ui) {
//do stuff with dropped data

    }
});

이제 문제는 요소를 신체에서 그리고 HTML 전체에서 끌 수 있다는 것입니다. 드래그 가능한 영역을 어떻게 제한합니까?

Answer 1

http://docs.jquery.com/ui/draggable#option-containment

지정된 요소 또는 영역의 범위 내에서 드래그하는 제한. 가능한 문자열 값 : '부모', '문서', '창', [x1, y1, x2, y2].

예시:

규정 된 격리 옵션으로 드래그 가능을 초기화하십시오.

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

또는 문제가 Draggable을 모든 곳에 배치 할 수 있다는 것입니다.

http://docs.jquery.com/ui/draggable#option-revert

true로 설정하면 드래그가 정지 될 때 요소가 시작 위치로 돌아갑니다. 가능한 문자열 값 : '유효한', '유효하지 않은'. 무효로 설정된 경우 DRACPABLE이 드롭 가능한 상태에서 떨어지지 않은 경우에만 되돌아갑니다. 유효한 경우, 그것은 다른 방법입니다.

그리고 마지막으로, 나는 당신이 draggable의 범위를 설정하는 것을 보지 못합니다. (편집하다: 그러나 그것은 당신의 문제를 해결하지 못합니다. 위의 다른 두 가지는해야합니다):

http://docs.jquery.com/ui/draggable#option-scope

Droppable의 수락 옵션 외에 드래그 가능하고 드롭 가능한 항목 세트를 그룹화하는 데 사용됩니다. 드롭 페이블과 동일한 스코프 값을 가진 드래그 가능은 드롭 페이블에 의해 허용됩니다.

예시:

지정된 범위 옵션으로 드래그 가능을 초기화하십시오.

$('.selector').draggable({ scope: 'tasks' });