限制scriptaculous draggable的拖动区域答案

【问题标题】：Limit drag area of scriptaculous draggable限制scriptaculous draggable的拖动区域
【发布时间】：2010-09-03 23:11:31
【问题描述】：

我用它来创建一堆可拖动元素：

$$('.box').each( function(item){ new Draggable(item) });

如何限制可拖动区域？这样，盒子可以放在页面上的任何地方，我想将拖动区域限制为它们当前的父元素（我认为我不需要创建一个可放置的元素）。或者，至少，如果它掉到它的父级之外，我想将它恢复到它的初始位置。我怎样才能做到这一点？谢谢。

【问题讨论】：

【解决方案1】：

可能有点晚了，但这是我的解决方案：

只需向可拖动项目添加快照

new Draggable('myItem', {
    snap: function(y) {
        return[ (y < 1024) ? (y > 0 ? y : 0) : 1024 ];
    }
});

现在您的项目仅沿 x 移动。

【讨论】：

【解决方案2】：

如果你想限制水平或垂直拖动，你可以使用这个：

new Draggable('myItem', {
    constraint: "horizontal"
    });

或者像 bopa 说的那样，您可以使用 snap 来限制具有特定 x y 的拖动，例如在此示例中： http://www.tutorialspoint.com/cgi-bin/practice.cgi?file=scriptaculous_14

【讨论】：