Javascript 通过封隔器模块中的轴限制移动

这是我手中的javascript代码

//外部js:packery.pkgd.js，draggabilly.pkgd.js
$（“#添加项”）。单击（函数（）{
$（“.grid”）。追加（“”）；
$grid.PACKEY（“销毁”）；
initParckery（）；
});
$grid=initParckery（）；
函数initParckery（）{
变量网格=$（'.grid'）.packer({
itemSelector:“.grid项”，
列宽：100
});
//使所有网格项都可拖动
grid.find（'.grid项'）。每个（函数（i，gridItem）{
var draggie=新的可拖动（gridItem）；
//将拖动事件绑定到封隔器
grid.PACKEY（'BindDragAbililyEvents'，draggie）；
});
返回网格；
}
//布局后显示项目顺序
函数orderItems（）{
var itemElems=$grid.packery（'getItemElements'）；
var res_text=''；
$（itemElem）。每个（函数（i，itemElem）{
res_text=''+$（itemElem.text（）；
});
$（'result_text'）。text（res_text）；
}
$grid.on（'layoutComplete'，orderItems）；
$grid.on（'dragItemPositioned'，orderItems）；

现在，盒子可以向左、向右和底部移动。如何将移动限制在底部

在中，可以指定轴。但是，我很困惑，在使用Pacery库的代码中，我应该把这个选项放在哪里。

试试这个：

var draggie = new Draggabilly(gridItem, {
  axis:'x'
});

要将Package插件限制为X轴，可以使用horizontal:true选项

var grid = $('.grid').packery({
  itemSelector: '.grid-item',
  columnWidth: 100,
  horizontal: true
});

查看小提琴：

---

（记住在包含网格元素上设置高度）

更新了我的答案。这将限制x轴的可拖动性。我应该将其置于

grid.packery（'bindDragableyEvents'，draggie）之上还是之下？以上-与现在相同的位置查看此修改的小提琴谢谢。现在它是正确的。但似乎只有运动是固定的。有时箱子仍然上下移动。
var grid = $('.grid').packery({
  itemSelector: '.grid-item',
  columnWidth: 100,
  horizontal: true
});