container

指定可拖动元素的容器，防止其被拖动到定义边界之外。

接受

CSS Selector String to target an HTMLElement
HTMLElement
Array<Number> ([top, right, bottom, left])
A Function that returns Array<Number> ([top, right, bottom, left])

当使用 Function 定义时，每次窗口或目标元素大小调整时，该值将自动刷新。
也可以使用 refresh() 方法手动刷新。

默认

null

容器代码示例

import { createDraggable } from 'animejs';

createDraggable('.square', {
  container: '.grid',
});

createDraggable('.circle', {
  container: [-16, 80, 16, 0],
});

<div class="large centered grid square-grid array-container">
  <div class="square draggable"></div>
  <div class="circle draggable"></div>
</div>

.grid.array-container::after {
  opacity: 1;
  top: calc(1rem);
  right: calc(1rem - 1px);
  bottom: calc(1rem - 1px);
  left: calc(10rem);
  border: 1px dotted currentColor;
  box-shadow: none;
}

trigger
containerPadding