3

다른 항목의 .dropable 목록에 삭제할 수있는 항목 목록에서 draggable을 사용하여 jquery를 고소하고 있습니다.Jquery draggable : 도우미 'clone'및 appendTo를 사용하여 droppable에서 스크롤

<div id="container"> 
<div id="left-pane" class="pane"> 
    <div class="item">Item A</div> 
    <div class="item">Item B</div> 
    <div class="item">Item C</div> 
    <div class="item">Item D</div> 
</div> 

<div id="right-pane" class="pane"> 
    <div class="item">Item E</div> 
    <div class="item">Item F</div> 
    <div class="item">Item G</div> 
    <div class="item">Item H</div> 
</div> 

$('.item').draggable({ 
    helper: 'clone', 
    appendTo: '#contentpane', 
    cursor: 'move' 
}); 
$('.item').droppable(); 

페인은 고정 된 높이를 가지고 있고, 우리가 숨겨진 요소를 볼 내부 스크롤 할 수 있도록 overflow-y: auto : 여기에 내가 할 노력하고있어 보여주기 위해 jsFiddle을합니다.

요소를 목록에서 다른 요소로 끌면 appendTo를 사용하고 있으므로 목록이 스크롤되지 않으며 끌어온 항목이 목록에 없습니다. 항목을 드래그 할 때 목록을 '스크롤 가능'하게 만드는 방법이 있습니까? 그렇지 않으면 목록의 맨 아래에 항목을 놓을 수 없습니다. 피들 예제에서 'Item H'항목을 놓습니다.

+0

+1 'appendTo'에 대해, 나는이 속성에 대해 몰랐고, 내가 작업하고있는 프로젝트에서 커다란 도움이되었다! 답장을 보내 주셔서 감사합니다. – chiliNUT

답변

0

내가 찾은 유일한 방법은 드래그 한 요소의 위치를 ​​감지하고 마우스 휠에서 스크롤하는 것처럼 부드러운 효과로 droppable 컨테이너를 스크롤하는 것입니다.

+0

어떤 위치에서 이벤트가 감지되고 있습니까? '견인'? –

0

다른 컨테이너의 스크롤 기능을 사용하기가 정말 쉽지 않습니다. 할 것.

이 주제에 대한 주제를 삭제했습니다. 기능에 대한 임시 해결 방법을 사용하여 질문을 수정할 수 있습니다. 관련 질문 확인 : JqueryUI, drag elements into cells of a scrolling dropable div containing large table

마지막 발언에 대해 sortable 속성을 사용하여 목록의 붐에 항목을 배치 할 수 있습니다. http://jqueryui.com/sortable/

+0

나는 정렬 할 수있는 또 다른 목록을 가지고 있지만,이 목록은 정렬 할 수 없기 때문에 dropable을 사용하는 이유는 무엇입니까? – Guillaume

+0

당신의 솔루션은 나쁘지 않습니다. 그러나 요소를 끌고 아무 데나 내려 가려고 할 때 드롭 존 ("#container")이 스크롤되면 드롭 존에서 발생합니다. 다소 이상한 것입니다. – Guillaume