拖拽

<img src="https://cdn.rawgit.com/dfcreative/draggy/design/logo.png"/><br/>

Draggy

<a href="/license"><img src="https://img.shields.io/npm/l/draggy.svg"/></a>
<img src="https://david-dm.org/dfcreative/draggy.svg"/>

元素的可拖动行为。演示。

var Draggable = require('draggy');
 
//make an element draggable
var el = document.querySelector('.my-element');
var draggy = new Draggable(el, {
    release: true,
    sniper: false,
    axis: 'x'
});
 
//bind event handler
draggy.on('drag', function () {
 
});

选项

范围	默认	描述
`axis`	`null`	按轴限制移动：`'x'`,`'y'`或`null`。
`pin`	`[0,0, selfWidth, selfHeight]`	可拖动元素内的区域肯定位于移动限制内。如果您需要可拖动元素不受其自身形状的限制，而是受某些内部形状的限制，则很有用。
`precision`	`1`	圆形位置到那个程度，以像素为单位。
`css3`	`true`	使用`position`或`translate3d`来放置元素。第一个更精确可靠，第二个更快。
`release`	`false`	当用户释放拖动时继续移动。
`repeat`	`false`	循环移动轴之一：`'x'`,`'y'`或`'both'`。
`sniper`	`true`	按 Ctrl/Cmd 减慢移动速度。
`threshold`	`0`	开始拖动所需的移动阈值 – 无论是数组、数字还是函数。
`within`	`document`	限制容器内的移动。传递`'parent'`给父节点。
`handle`	`self.element`	使用传递的元素或选择器作为拖动的句柄。不点击手柄将被忽略。传递 null 将忽略句柄。
`cancel`	`undefined`	忽略在与选择器匹配的元素上开始的拖动。
`droppable`	`undefined`	用于检测可放置区域的选择器、元素或元素列表。对于每个放置元素，将调用`drop,`dragover `and`dragout` 事件。

活动

名称	描述
`dragstart`	拖动开始。在元素/控制器上调用。
`threshold`	进入阈值模式。在控制器上调用。
`drag`	拖动迭代。在元素/控制器上调用。
`track`	跟踪运动。在控制器上调用。
`release`	用户释放拖动。在控制器上调用。
`dragend`	拖动已完全完成。在元素/控制器上调用。
`dragover`	调用自身和放置目标。
`dragout`	调用自身和放置目标。
`drop`	调用自身和放置目标。

应用程序接口

名称	描述
`Draggy.cache`	WeakMap 包含元素的拖拽实例。`Draggy.cache.get(element)`– 返回元素的拖拽实例。
`Draggy.prototype.move(x, y)`	移动到新位置，同时考虑轴和限制。您可以重新定义此方法以实现自定义类型的运动限制，例如圆周运动。但谁敢？
`Draggy.prototype.state`	当前拖动状态：`'idle'`、`'threshold'`、`'drag'`、`'release'`。
`Draggy.prototype.update(event?)`	更新移动限制。`event`是可选的。