可拖动约束

Draggable constraints?

本文关键字：约束 拖动      更新时间：2023-09-26

我发现了这两个非常简单的可拖动div代码块：link1 和 link2

如何在没有 jQuery UI 的情况下使用 JS/jQuery 将 x 轴上的移动限制为屏幕宽度？

我确实搜索过，但我只有对jQuery UI的引用。怎么自己做？

我将基于您链接到的第一个代码片段。

为了将div 限制为水平移动，您需要做的就是删除设置top偏移量的代码部分！

之后，将div 约束到窗口的边界需要一些思考。当前偏移div（e.pageX + pos_x - drg_w）的坐标对应于div的左上角。我们永远不希望它超过窗口的最左边的边界，或者x=0。在数学上执行此操作的一个好方法是使用 Math.max 函数，它将返回两个值中较大的一个。

left: Math.max(e.pageX + pos_x - drg_w, 0)

现在我们需要检查窗口的右边框。我们取右边界的坐标（$(window).width()）并减去div的宽度，因为我们正在检查div的右边缘。相应地，在这种情况下，Math.min可以起到很大的作用。

现在一起，

$('.draggable').offset({
    left: Math.min($(window).width() - drg_w, Math.max(e.pageX + pos_x - drg_w, 0))
})

还有那些微小变化的代码笔。:)

相关文章：