7

ドラッグ可能なアイコンを受け入れるドロップ可能なli要素のセットがあります。アイテムのリストは、スクロール可能な div 要素にあります。ここに簡単な例をまとめました: http://www.nerdydork.com/demos/dragscroll/

ドラッグ可能な要素をドラッグしているときに、要素のリストを自動スクロールする方法があるかどうか疑問に思っています。たとえば、あなたがhttp://www.nerdydork.com/demos/dragscroll/#jのように中間にいるとしましょう。div の上部に近づくと上にスクロールし始め、div の下部に近づくと下にスクロールし始めます。

jQueryでこれを達成する方法を知っている人はいますか?

アップデート

私は近づいています。コンテナ div の上部と下部に固定 div を作成しました。ホバリングすると、 http: //plugins.jquery.com/project/aautoscroll を使用して自動スクロールが開始されます

問題は、下の領域にカーソルを合わせると、文字のドラッグ可能性が台無しになることです。ただし、自動スクロール領域の下部に問題があるようです。

私が話しているバグを確認するには、次の短いビデオをご覧ください: http://screencast.com/t/JBFWzhPzGfz

下に自動スクロールすると、ホバーが右の文字の上にないことに注意してください。ビデオの終わりに向かって、リストの左マージンにカーソルを合わせると、何らかの理由でリセットされ、再び機能するように見えることがわかります。

4

2 に答える 2

7

ドラッグ可能なオブジェクトに「refreshPositions: true」オプションを設定すると、jQuery はすべてのマウス イベントでオフセットを再計算します。これで問題が解決するはずです。

于 2011-03-21T22:26:24.817 に答える
0

間隔関数を使用することもできます: http://jsfiddle.net/msszhwzf/6/

for (var i = 0; i < 10; i++) {
    $("#sortableContainer").append('<div class="sortable"></div>');
    $("#droppableContainer").append('<div class="droppable"></div>');
};

var adding = 0
var scrollInterval = null;

$("#sortableContainer").sortable({
    refreshPositions: true,
    start: function (e, ui) {
        scrollInterval = setInterval(function () {
            var foo = $("#droppableContainer").scrollTop();
            $("#droppableContainer").scrollTop(foo + adding);
        }, 50)
    },
    stop: function (e, ui) {
        clearInterval(scrollInterval);
    },
    sort: function (e, ui) {
        var top = e.pageY - $("#droppableContainer").offset().top
        if (top < 10) {
            adding = -15
        } else if (top > $("#droppableContainer").height() - 10) {
            adding = 15
        } else {
            adding = 0
        }
    },
});
$(".droppable").droppable({
    hoverClass: "active",
    accept: ".sortable",
    drop: function (event, ui) {
        ui.draggable.remove();
    },
})
于 2014-09-30T15:47:42.447 に答える