Jquery ui jquery ui可排序-单击滚动条将其打断

当您释放滚动条时，滚动

.sortable（）

容器中的div将开始拖动该div

在小提琴中，有3种不同的分类，其中1种是滚动分类

---

错误：点击滚动条并向上或向下拖动以滚动内容，当您释放鼠标时，div开始拖动，这使它跟随您的鼠标，并且在不刷新页面的情况下无法取消单击。

您可以使用jquery的

.mousemove

事件，如下所示：

$('#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");
});

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

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

$（'#可排序div'）.mousemove（函数（e）{
宽度=$（this）.width（）；
极限=宽度-20；
如果（e.offsetXlimit）
$（“#可排序”）。可排序（“禁用”）；
其他的
$（“#可排序”）。可排序（“启用”）；
});

我在这里创作了小提琴。希望它能满足您的需要。

sortable（）

可以为句柄指定选择器，就像

draggable（）

一样。然后，只有匹配的元素才能获得单击事件。可以按如下方式指定控制柄选择器：

$('#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");
});

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

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

你已经拥有了剩下的大部分你需要的东西。溢出元素上的内部div构成了一个合适的句柄，如下所示：

$('#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");
});

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

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

---

苏伯雷德回答的补充：

---

这完全符合我的需要。但是，我没有依赖滚动条的宽度为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的代码以适应。现在可以使用一个或两个滚动条

我还使用了以下代码：

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

---

非常感谢。

一个可能的答案可能是设置一个title元素，作为您单击拖动的部分，同时保持可滚动内容的分离。我正在尝试解决相同的问题。我注意到这种行为存在于Chrome中。通过右键单击，然后单击其他位置，可以使div从鼠标中释放，而无需刷新。在Firefox中，尝试滚动只会成功地拖动div，不会发生滚动，但当您释放它时，它不会粘在鼠标上。我还没有检查IE。我不能在OS X 10.7上用Chrome或Safari进行回购。这种情况发生在什么浏览器/操作系统组合中？我的错误发生在Chrome 23.0.1271.95 m和IE 9中。都在Windows 7上运行。这看起来很接近。但是，如果我在整个批次中添加一个外部DIV，填充为50px，则计算结果是偏移的。这能解决吗？@leetylor看到我更新的小提琴了吗？你需要用

offsetX

更改

pageX

。非常感谢。稍后我将用我的项目来测试这一点。谢谢你的时间。虽然我最后只是使用了一个title元素，并将句柄设置为它（不可滚动），但这是有效的。这实际上不是一个好的解决方案，因为如果你在拖动时将鼠标移出滚动条的宽度，你将触发可排序事件，它将被卡住。这个答案非常有效。如果我们点击滚动条，它不会断开。这是最好的答案。选择的答案是一种破解，当您在滚动时将鼠标拖出滚动条宽度边界时失败。当然，如果您将鼠标保持在指定的滚动条宽度范围内，黑客可以防止出现问题，但用户在滚动时不会这样做。他们经常将鼠标移动到滚动条的左/右。