Question

我正在使用jQuery UI（最新版本）。我们的页面上有一个与jsfiddle相似的分隔栏。它只能沿x轴拖动，但我们遇到的问题是让它在某一点停止。

当条形图到达窗口任一边缘的250px范围内时，我们希望它停止。我确实找到了这个解决方案＆＃39;然而，这并不适合我们：

关于jQueryUI中的拖动事件，调用stopDragging（）：

function stopDragging() {

    console.log( $('#dragbar').offset().left );

    if ( $('#dragbar').offset().left < 250 )
    {
        $('#dragbar').trigger('mouseup');
    }
}

但是，这会引发错误：

Uncaught TypeError: Cannot read property '0' of null

此方法还会释放拖动条上的鼠标抓取。我希望这样的行为是这样的，如果用户拖动到这一点，他们就不能再拖动它了 - 如果他们不释放点击并拖动另一个方向，它仍然可以工作。

更新

看一下这个小提琴的例子。拖动时，绿色和蓝色将相应调整大小。

http://jsfiddle.net/U95hW/1/

更新2

我创造了这个小提琴，使其更接近最终结果。当我按照@ntgCleaner的建议添加边距时，它会改变条形图的位置。

http://jsfiddle.net/U95hW/8/

Answer 1

感谢ntgCleaner ，我能够解决这个问题。我没有使用他的解决方案，但他确实让我朝着正确的方向前进。

在这里工作小提琴：http://jsfiddle.net/U95hW/87/

我做的是使用$.resizable()。这使我能够灵活地控制它的小或宽，同时选择我想要拖拽的边缘。

我能够使用我的dragbar元素作为窗口小部件的句柄，一切都很顺利！

感谢所有参与者！

你如何防止jQueryUI的可拖动交互超过页面上的某个偏移？

1 个答案: