jQuery UI 在溢出的 Div 中可选答案

【问题标题】：jQuery UI Selectable in Overflowed DivjQuery UI 在溢出的 Div 中可选
【发布时间】：2012-05-11 22:54:28
【问题描述】：

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

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

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

如果您单击项目 1 并向下拖动，一旦您离开演示 div，我希望 ul 滚动以便项目 6、7 等开始显示。

【问题讨论】：

不会完全偏离主题，但 Sortable plugin 正是这样做的。也许有人可以分析它的代码并检查它是否以一种简单的方式完成......

标签： jquery html jquery-ui selectable

【解决方案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');

【讨论】：

【解决方案2】：

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

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

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

【讨论】：