jquery uiリストがビューポートから展開されたときにソート可能

Question

現在、sortable jqueryプラグインを使用して注文できる大きなリストがあります。問題は、ユーザーがリストの一番上から項目を取り出し、その項目を下にドラッグしたい場合、非常に厄介なことです。ウィンドウをスクロールさせるためにマウスを動かし続ける必要があります。

HTML

<ul id="sortable"> 
    <li class="ui-state-default">List Item</li> 
    <li class="ui-state-default">List Item</li> 
    // 50+ more list items 
</ul> 

JS

$("#sortable").sortable(); 

デモフィドル：http://jsfiddle.net/rmSgx/490/

がユーザーまでダウンして自動スクロールするリスト項目をドラッグするユーザーを可能に修正がありますリストの好きな場所にいるのですか？

Answer 1

これは、マウスがエッジのパラメータ内にあり、outモードイベントにあるときにスクロールアクションをトリガすることで可能です。

ビューポートに基づいてこれを行うことはできませんが、コンテナで行う必要があります。

私の例では、包含リスト要素をビューポートの高さから50pxを引いた値に設定しました。アクションを呼び出すことができるように、上下にギャップを設けます。

$('#sortable').css({height: ($(window).height()-50) + 'px'}); 
var scroll = ''; 
var $scrollable = $("#sortable"); 

function scrolling() { 
    if (scroll == 'up') { 
    $scrollable.scrollTop($scrollable.scrollTop() - 20); 
    setTimeout(scrolling, 50); 
    } else if (scroll == 'down') { 
    $scrollable.scrollTop($scrollable.scrollTop() + 20); 
    setTimeout(scrolling, 50); 
    } 
} 

$("#sortable").sortable({ 
    scroll: false, 
    out: function(event, ui) { 
    if (!ui.helper) return; 
    if (ui.offset.top > 0) { 
     scroll = 'down'; 
    } else { 
     scroll = 'up'; 
    } 
    scrolling(); 
    }, 
    over: function(event, ui) { 
    scroll = ''; 
    }, 
    deactivate: function(event, ui) { 
    scroll = ''; 
    } 
}); 

デモ：http://jsfiddle.net/kplcode/rmSgx/492/