2

アイテムのリストがあり、ユーザーが複数のアイテムを選択できるようにする必要があります。multiselect 属性を持つデフォルトの html select 要素を使用する代わりに、jQuery UI の選択可能な対話を使用したいと考えています。アイテムのリストが長い場合を除いて、すべてが配線されており、特定の高さでオーバーフローする div 内に配置することを除いて、うまく機能します。問題は、ユーザーがクリックしてドラッグしてリスト内の複数のアイテムを選択し、表示されていないが div のオーバーフロー部分にあるアイテムを選択できるようにしたい場合、マウスを div の外にドラッグすると、通常の複数選択要素のように、div の「非表示」部分に自動的にスクロールすることはありません。

divのmousemoveまたはmouseleaveイベントを処理して手動でスクロールできることは間違いありませんが、これを自動的に行う方法や最も簡単な方法は何かを誰かが知っているかどうか疑問に思っていました.

これは、何が機能しないかを示す jsfiddle です: http://jsfiddle.net/CAZxk/

アイテム 1 をクリックして下にドラッグすると、デモ div を離れたら、ul をスクロールして、アイテム 6、7 などが表示されるようにします。

4

2 に答える 2

1

これは、ソート可能なプラグインのコードから変換するのはかなり簡単でした。これを選択可能な「開始」機能に入れました：

$(window).mousemove(function(e) {

    var sensitivity = 10, speed = 20, $d = $(document);

    if (e.pageY - $d.scrollTop() < sensitivity) {

        $d.scrollTop($d.scrollTop() - speed);    // scroll up

    } else if ($(window).height() - (e.pageY - $d.scrollTop()) < sensitivity) {

        $d.scrollTop($d.scrollTop() + speed);    // scroll down

    }

    if (e.pageX - $d.scrollLeft() < sensitivity) {

        $d.scrollLeft($d.scrollLeft() - speed);  // scroll left

    } else if ($(window).width() - (e.pageX - $d.scrollLeft()) < sensitivity) {

        $d.scrollLeft($d.scrollLeft() + speed);  // scroll right

    }

});

そして、選択可能な「停止」機能でリスナーをオフにしました：

$(window).unbind('mousemove');
于 2013-03-15T02:17:21.737 に答える
0

これは、jQueryUISelectableプラグインの既知の問題です-

http://bugs.jqueryui.com/ticket/3223。

jQuery UI Sortableはこの機能を提供するので、そこで何が行われたかを確認できます。jQuery UIチケットには、Sortableでこれを実装するために使用されるソースコードを含むリンクがあります。

于 2012-05-12T11:22:29.537 に答える