jQuery Draggable 및 오버플로 문제

jQuery Draggable 및 오버플로 문제

---

overflow : scroll로 설정된 컨테이너 div에서 div를 드래그 할 때 원하지 않는 효과가 발생합니다.

문제가있는 다른 사람의 예를 찾았지만 해결책을 찾을 수 없습니다.

빈 붙여 넣기 예

무슨 일이 일어나면 스크롤이 증가하는 것입니다. 스크롤 가능한 div 내의 대상으로 드래그하려는 경우 왜 이것이 원하는 동작인지 알 수 있지만 스크롤링 파악에서 벗어날 수 있기를 원합니다.

---

두 개의 오버플로 자동 div 사이의 드래그를 가능하게하는 비슷한 문제가있었습니다. 이전 답변의 도움 으로이 조합이 저에게 효과적이라는 것을 알았습니다 (Safari 5.0.3, jquery-1.4.4, jquery-ui-1.8.7).

appendTo: 'body',
containment: 'window',
scroll: false,
helper: 'clone'

---

appendTo

요소, SelectorDefault : 'parent'

appendTo 옵션으로 전달되거나 선택된 요소는 드래그하는 동안 드래그 가능한 도우미의 컨테이너로 사용됩니다. 기본적으로 도우미는 드래그 가능한 컨테이너와 동일한 컨테이너에 추가됩니다.

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

$('.selector').draggable({ appendTo: 'body' });

---

확실히 문서에주의를 기울여야합니다.

http://docs.jquery.com/UI/Draggable#option-scroll

스크롤

유형 : 부울
기본값 :로 true
설정하면 true컨테이너를 드래그하는 동안 자동 스크롤됩니다.

여기에 들어온 모든 사람들은 내 실수에서 배운다, RT (F) M !!!

---

복제 솔루션은 작동하지만 두 가지 문제가 있습니다.

첫째 : 클론이 본문에 추가됩니다. CSS에 따라 요소가 스타일을 변경할 수 있습니다. 시작하기 전에 다른 요소 내부에 있고 드래그하는 동안 본문 요소에 직접 있기 때문입니다.

둘째 : 때때로 요소는 이동해야하며 복제본은 개체를 그곳에 둡니다.

따라서이 문제에 대한 해결책은 다음과 같습니다.

$('.selector').draggable({
    helper: 'clone',
    start: function(){
        $(this).hide();             
    },
    stop: function(){
        $(this).show()
    }
});

---

스크롤 옵션을 설정해도 하위 항목이 오버플로 영역에 숨겨지는 것을 중지하지 않습니다. 도우미 옵션을 사용하는 해결 방법을 생각해 냈습니다. 확인 해봐:

http://pastebin.me/164f0a4073496563fe3179ddcec5fd6d

또한 여기에 내가 만든 다른 게시물에 대한 참조가 있습니다.

jquery UI 드래그 가능한 요소는 스크롤 div 외부에서 '드래그 가능'하지 않습니다.

---

포함하지 않을 요소 유형을 지정할 수도 있습니다.

<div class="draggable"> 
    <h2>This will drag the div</h2>
    <ul>
       <li>This won't drag the div</li>
    </ul>
</div>

이 취소 속성을 적용하여 지정된 자식 요소의 이벤트를 무시합니다.

$('.draggable').draggable({cancel : 'ul'});

참고 URL : https://stackoverflow.com/questions/811037/jquery-draggable-and-overflow-issue