容器内的jQuery snap元素

Question

我添加了JSFiddle： http://jsfiddle.net/c62rsff3/

我正在尝试使用以下代码使2个元素相互捕捉：

$('.draggable-elements').draggable({ snap: true });

我还有一个宽度和高度为400px的容器。而且我无法找到一种方法让元素在拖动时不会超出我的容器。

<div class="container">
      <div class="draggable-elements"></div>
      <div class="draggable-elements"></div>
</div>

我希望用户能够仅在我创建的容器内玩元素，更像画布一样。

有什么想法吗？

Answer 1

您应该添加属性'containment'（https://jqueryui.com/draggable/#constrain-movement）

$('.draggable-elements').draggable({ snap: true, containment: '.container' });

你的小提琴：http://jsfiddle.net/c62rsff3/1/