javascript - 如何防止 jQueryUI 的可拖动交互超出页面上的某个偏移量？

Question

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

当栏到达窗口任一边缘 250 像素以内时，我们希望它停止。我确实找到了这个“解决方案”，但它对我们来说并不真正有效:

在 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 

此方法还会释放鼠标对拖动栏的控制。我希望这种行为是这样的:如果用户拖动到这一点，他们就不能再拖动它 - 如果他们不释放单击并以其他方式拖动，它仍然会起作用。

更新

请参阅此 fiddle 的示例。当您拖动时，绿色和蓝色将相应地调整大小。

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

更新2

我创建这个 fiddle 是为了更接近最终结果。当我按照@ntgCleaner的建议添加边距时，它改变了栏的位置。

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

Answer 1

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

在这里工作 fiddle :http://jsfiddle.net/U95hW/87/

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

我能够使用我的 dragbar 元素作为小部件的句柄，一切都很好!

感谢所有参与的人!