2

我们有一个项目列表，我们需要允许用户选择多个项目。除了使用带有 multiselect 属性的默认 html 选择元素之外，我们还想使用 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

这是 jQuery UI Selectable 插件的一个已知问题 -

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

jQuery UI Sortable 确实提供了这个功能，所以你可以看看那里做了什么来提供帮助。jQuery UI 票有一个链接，其中包含用于在 Sortable 中实现此功能的源代码。

于 2012-05-12T11:22:29.537 回答