流星:如何包含可拖动的对象

Question

我是流星的新手，但从想要开始，我知道它的可拖动对象在引擎盖下有jquery。我通过使用添加了可拖动对象

li id="data-item-sortable-id"

我希望能够包含可拖动对象可以移动到的区域。在jquery中，你会做类似的事情

var containmentTop = $("#stop-top").position().top;
var containmentBottom = $("#stop-bottom").position().top;
$('#bar').draggable({axis: 'y', containment : [0,containmentTop,0,containmentBottom] });

有没有人有一个很好的例子，说明如何使流星包含其可拖动物体可以去的地方？

Answer 1

在 jQuery UI 中，包含通常基于 Element、Selector 或特定的字符串值。

将拖动限制在指定元素或区域的边界内。

元素

：用作容器的元素。

选择器：指定要用作容器的元素的选择器。

字符串

：标识要用作容器的元素的字符串。可能的值："parent"、"document"、"window"

数组

：以 [ x1, y1, x2, y2 ] 的形式定义边界框的数组

我没有使用过流星，但我怀疑你可以通过以下方式获得你想要的遏制：

var cTop = $("#stop-top").position();
var cBottom = $("#stop-bottom").position();
$('#bar').draggable({
  axis: 'y',
  containment: [ cTop.left, cTop.top, cBottom.left, cBottom.top ]
});

就个人而言，我只会使用类似 "parent" .

如果这不起作用，可能需要查看更完整的示例。

请记住，left是 X 轴，top是 Y 轴。