我正在使用 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 的示例。当您拖动时,绿色和蓝色将相应地调整大小。
更新2
我创建这个 fiddle 是为了更接近最终结果。当我按照@ntgCleaner的建议添加边距时,它改变了栏的位置。
最佳答案
感谢 ntgCleaner,我能够解决这个问题。我没有使用他的解决方案,但他确实让我朝着正确的方向前进。
在这里工作 fiddle :http://jsfiddle.net/U95hW/87/
我所做的是使用$.ressized()
。这使我能够灵活地控制它的大小或宽度,同时选择我想要拖动的边缘。
我能够使用我的 dragbar
元素作为小部件的句柄,一切都很好!
感谢所有参与的人!
关于javascript - 如何防止 jQueryUI 的可拖动交互超出页面上的某个偏移量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16065613/