jquery-ui - jquery ui sortable - 单击滚动条会破坏它

Question

滚动.sortable()容器内的 div 将在您释放滚动条时开始拖动 div

在小提琴中，有 3 个不同的 sortables，其中 1 个是滚动的

http://jsfiddle.net/wnHWH/1/

Bug：点击滚动条向上或向下拖动滚动内容，当你释放鼠标时，div开始拖动，这使得它跟随你的鼠标，没有办法不刷新页面就解开它。

Answer 1

您可以.mousemove像这样使用 jquery 的事件：

$('#sortable div').mousemove(function(e) {
    width = $(this).width();
    limit = width - 20;
    if(e.offsetX < width && e.offsetX > limit)
        $('#sortable').sortable("disable");
    else
        $('#sortable').sortable("enable");
});

我已经创建了在这里工作的小提琴http://jsfiddle.net/aanred/FNzEF/。希望它能满足你的需要。

Answer 2

sortable()可以像 do 一样为句柄指定选择器draggable()。然后只有匹配的元素才能获得点击事件。您可以像这样指定句柄选择器：

$('#sortable').sortable( {handle : '.handle'});

您已经拥有了其余部分所需的大部分内容。溢出元素上的内部 div 是一个合适的句柄，如下所示：

<div style="height: 200px;overflow:auto">
    <div class="handle" style="height: 300;">
        blah
        blah
        blah

然后您需要恢复其他所有内容的可排序性。你会认为你可以只给这些 divhandle类，但它正在寻找孩子，所以你需要像这样包装它们：

<div><div class="handle">asadf</div></div>

修改过的小提琴

Answer 3

补充 SubRed 的回答：

---

这非常适合我的需求。但是，我没有依赖滚动条的宽度为 20 像素（如上），而是使用了以下代码：

如何获取浏览器的滚动条大小？

这允许代码在不同的设置上处理不同的滚动条宽度。为方便起见，将代码粘贴在这里：

function getScrollBarWidth () 
{
    var inner = document.createElement('p');
    inner.style.width = "100%";
    inner.style.height = "200px";

    var outer = document.createElement('div');
    outer.style.position = "absolute";
    outer.style.top = "0px";
    outer.style.left = "0px";
    outer.style.visibility = "hidden";
    outer.style.width = "200px";
    outer.style.height = "150px";
    outer.style.overflow = "hidden";
    outer.appendChild (inner);

    document.body.appendChild (outer);
    var w1 = inner.offsetWidth;
    outer.style.overflow = 'scroll';
    var w2 = inner.offsetWidth;
    if (w1 == w2) w2 = outer.clientWidth;

    document.body.removeChild (outer);

    return (w1 - w2);
}

我还使用宽度值作为滚动条的高度，并修改了 SubRed 的代码以适应。这现在适用于一个或两个滚动条。

我还使用了以下代码：

使用jQuery检测DIV中是否存在滚动条？

确定任一滚动条的存在并相应地调整可排序代码的打开/关闭。

非常感谢。