jQuery draggable 및 오버플로 문제 [폐쇄

StackOverflow https://stackoverflow.com/questions/811037

  •  03-07-2019
  •  | 
  •  

문제

오버플로로 설정된 컨테이너 DIV에서 DIV를 드래그 할 때 바람직하지 않은 효과가 있습니다. 스크롤.

나는 그들이 문제가있는 다른 사람의 예를 찾았지만 결의안을 찾을 수 없었습니다.

페이스트 빈의 예

스크롤이 증가한 것은 스크롤이 증가한 것입니다. 스크롤 가능한 div 내의 대상으로 드래그하고 싶다면 왜 이것이 원하는 동작이 될지 알 수 있지만 스크롤을 잡을 수 있기를 원합니다.

도움이 되었습니까?

해결책 3

문서에주의를 기울이는 것이 확실합니다

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

스크롤

유형: 부울
기본: true
설정된 경우 true, 컨테이너 자동 스크롤을 드래그하는 동안.

여기에 들어가는 모든 사람들은 나의 실수로부터 배우고, rt (f) m !!!

다른 팁

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

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

부록

요소, selectordefault : '부모'

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

코드 예제는 지정된 부록 옵션으로 draggable을 초기화합니다.

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

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

첫째 : 클론이 몸에 첨부됩니다. CSS에 따라 요소는 스타일을 변경할 수 있습니다. 스타일이 시작되기 전에 다른 요소의 내부에 있고 드래그하는 동안 바디 요소에 직접 나타납니다.

둘째 : 때로는 요소가 움직여야하고 클론은 물체를 거기에 두어야합니다.

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

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

스크롤 옵션을 설정한다고해서 오버플로 영역에 어린이가 숨겨져있는 것을 막지 않습니다. 나는 도우미 옵션을 사용하는 일 라운드를 생각해 냈습니다. 확인 해봐:

http://pastebin.me/164f0a4073496563fe3179ddcec5fd6d

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

jquery ui draggable 요소 스크롤 div 외부에서 'draggable'이 아닌 요소

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

<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'});
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top