Question

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

在小提琴中，有3种不同的可排序，其中1种是滚动的

错误：点击滚动条并向上或向下拖动以滚动浏览内容，当您释放鼠标时，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()可以像draggable()那样指定句柄的选择器。然后只有匹配的元素才能获得点击事件。您可以像这样指定句柄选择器：

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

你已经掌握了剩余部分所需的大部分内容。溢出元素的内部div构成了一个合适的句柄，如下所示：

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

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

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

Modified fiddle

Answer 3

补充SubRed的回答：

这完全符合我的需要。但是，我没有依赖滚动条的宽度为20像素（如上所述），而是使用了以下代码：

How can I get the browser's scrollbar sizes?

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

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代码。现在，这适用于一个或两个滚动条。

我还使用了以下代码：

Detecting presence of a scroll bar in a DIV using jQuery?

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

非常感谢。

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

3 个答案: