스크롤 막대에 문제가있는 jQuery UI Draggable 사용하기?

Question

내가 다음 HTML 코드가이 CSS 코드

<div id="scroll"> 
    <div class="foo">foo1</div> 
    <div class="foo">foo2</div> 
    .... 
    <div class="foo">foo8</div> 
</div> 

<div id="to_drop"> 
    DROP HERE!!! 
</div> 

:

#scroll 
    { 
    width: 100px; 
    height: 80px; 
    overflow: auto; 
    } 

나는 다음과 같은 자바 스크립트/jQuery 코드를 :

는

$(document).ready(function() 
    { 
    $('.foo').draggable(); 
    }); 

문제는 점이다 .foo 요소는 draggable이지만안에 끌 수 있습니다.. 이것을 피할 수있는 방법이 있습니까? 사용자가 #scroll에서 요소를 드래그 할 수 있도록하고 그렇게 할 때 스크롤이 작동하지 않습니다에 대한 그는 #scroll 내부 .foo을 드래그하면 내가 (좋아하는 것 때문에,

를 (예는 here을 확인)을 스크롤바는 움직이지 않을 것이고, 스크롤 바는 사용자가 스크롤 바를 마우스로 클릭하고 움직일 때만 작동해야한다.) #to_drop에 놓을 수 있어야한다.

Answer 1

원래 요소는 overflow: auto 스타일로 인해 부모의 경계로 제한됩니다.

당신은 clonehelper으로 문제를 해결 할 수 있습니다

$('.foo').draggable({ 
    helper: "clone" 
}); 

당신은 this fiddle에서 테스트 할 수 있습니다.

Answer 2

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