可拖动约束？

Posted 2023-05-08

【中文标题】可拖动约束？

【英文标题】：Draggable constraints?

【发布时间】：2016-06-13 04:20:45

【问题描述】：

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

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

我进行了搜索，但我只有对 jQuery UI 的引用。如何自己做？

【问题讨论】：

jQueryUI Draggable: Constrain draggability to a single axis?的可能重复

@ItsGreg OP 没有使用 jQueryUI。 :)

我搜索过你编码了吗？ 您的代码在哪里？

Moveable/draggable <div>的可能重复

@FrédéricHamidi 什么代码？我已经告诉过你，Google 搜索的前 10 页只是关于 jQuery UI，而不是 DIY，而且我们都知道 Google 搜索 10 页之后会有无尽的空白。非常简单的代码链接到问题。

【参考方案1】：

我将以您链接到的第一个代码 sn-p 为基础。

为了将 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))
)

还有这些细微变化的code pen。 :)

【讨论】：

太棒了。 :-) 我的问题可能设置不正确，我不想禁用 y 轴，只是为了限制 x 轴，但仍然......很好的答案！

@Solo 哦，好的。好吧，如果需要，您也可以使用类似的调整来约束 y 轴的边界。 :)