정렬 가능한 드래그 가능한 요소가 스크롤 바깥에서 벗어납니다.

Question

오버 플로우 -y를 적용하는 긴 중첩 목록이 있습니다 : 자동, 각 요소에는 정렬 가능한 위젯이 첨부되어 있습니다.

지금 우리가 직면 한 문제는 드래그 게이블 요소가 바람직하지 않은 스크롤 막대 컨테이너에서 나간다는 것입니다. 위치가 절대로 설정되고 Z- 인덱스가 1000으로 설정되어 있고 또한 이해합니다. 요소를 드래그하는 동안 상위 요소의 높이를 고려하면 계산 된 높이까지 끌어 올 수 있습니다.

위치를 상대 위치로 변경하면 스크롤 막대 내부에서만 요소를 드래그 할 수 있지만 드래그하여 너무 커서 드래그 할 수있게됩니다.

원하는 동작 : 요소를 스크롤 막대 내부로 드래그 할 수 있어야하며 마지막 요소의 아래쪽 옵셋 위치를 벗어나지 않아야합니다.

다음 코드의 단편이다 :

$(".sortableList").sortable({ 
axis: 'y', 
containment: 'parent', 
tolerance: 'pointer', 
distance: 5, 
start: function (event, ui) { 
    $(ui.item).find('#contain').hide(10, 'swing'); 
    $(ui.item).addClass('setHeight'); 
    ui.placeholder.height(ui.item.height()); 
    $(".sortableList").sortable('refresh'); 
}, 
stop: function (event, ui) { 
    $('#contain').show(10, 'swing'); 
    $(ui.item).removeClass('setHeight'); 
} 

을}); 이 문제에 대한

JS 바이올린 링크는 다음과 같습니다 http://jsfiddle.net/tj_vantoll/hK7YT/3/ : http://jsfiddle.net/hK7YT/2/

Answer 1

내가 주로 containment 옵션을 재생하여 작동이 얻을 수 있었다. 포함 목록은 정렬 목록을 스크롤하지 않는 한 작동합니다. jQuery UI 자체 (http://bugs.jqueryui.com/ticket/9460)와 관련하여 문서화 된 문제입니다. 스크롤해야 할 필요가 없도록 UI에서 가능한 한 많은 목록을 제공하는 것이 좋습니다.