可拖动约束？

Question

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

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

我搜索但我只提到了jQuery UI ..如何自己动手？

Answer 1

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

为了将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。 ：）