Question

我们有一个项目列表，我们需要允许用户选择多个项目。我们不想仅使用带有multiselect属性的默认html select元素，而是使用jQuery UI可选择的交互。我们把它全部连接起来并且它工作得很好，除非项目列表很长，我们把它放在一个将在某个高度溢出的div中。问题是，如果用户点击并拖动以选择列表中的多个项目，并且他们希望能够选择不可见但在div的溢出部分中的项目，如果他们将鼠标拖到div之外，它不会像普通的多选元素那样自动滚动到div的“隐藏”部分。

我毫不怀疑我们可以处理div的mousemove或mouseleave事件并手动滚动但是我想知道是否有人知道自动执行此操作或者最简单的方法是什么。

这是一个显示不起作用的jsfiddle：http://jsfiddle.net/CAZxk/

如果你点击第1项并向下拖动，一旦你离开了演示div，我希望ul滚动，所以项目6,7等开始显示。

Answer 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');

Answer 2

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

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

jQuery UI Sortable确实提供了这项功能，因此您可能会看看在那里做了什么来提供帮助。 jQuery UI故障单有一个链接，其中包含用于在Sortable中实现此功能的源代码。

在Overflowed Div中可选择jQuery UI

2 个答案: