Dragdealer拖动组件

官网：

<code>http://skidding.github.io/dragdealer/</code>

<code>https://github.com/skidding/dragdealer</code>

目前最新版本为098.

引入js和css

此处我引入了jquery，这是为了更方便的操作dom元素。Dragdealer 组件本身并不依赖jquery或其他任何类库。

Dragdealer(wrapper, options={})

接受一个id或包裹块元素的dom引用，和一个options配置选项作为参数。

bool disabled=false

初始化为禁用状态。该操作会给被操作的手柄增加一个<code>.disabled</code>类属性。

bool horizontal=true

是否水平拖动。

bool vertical=false

是否垂直拖动。

number x=0

初始化水平位置(left)，接受一个[0,1]之间的浮点数。

number y=0

初始化水平位置(top)，接受一个[0,1]之间的浮点数。

number steps=0

在包裹元素范围内，限制手柄的位置。它将包裹元素范围定义为一定量的等距虚拟网格。这约束了手柄可以放在这些步数以内的任意位置。如，将滑动器的steps设置为3，将会只允许你将滑动器移动到左侧、中间和右侧3个位置。

bool snap=false

如果设置了steps的数量，是否在拖动过程中，是否让手柄立即卡到最近的位置。打个比方，snap=false时像是无级变速，true时是固定档位。

bool slide=true

手柄在释放后是否继续滑动，这依赖于释放前的滑动速度。

bool loose=false

是否在拖动过程中放松包装器的边界。这允许手柄稍微移出包装器边界一点，但一释放就滑动回到边界的对齐位置。

number top=0

手柄和包装器边界之间的上边距。

number bottom=0

手柄和包装器边界之间的下边距。

number left=0

手柄和包装器边界之间的左边距。

number right=0

手柄和包装器边界之间的右边距。

string handleClass=handle

定制手柄元素的属性类。

bool css3=true

是否在较新的浏览器中使用css3 transform 来代替绝对定位。

fn customRequestAnimationFrame

（在测试时）提供定制的 cancelAnimationFrame 函数。

fn customCancelAnimationFrame

注意：从作用出发，将回调事件单独拿出来，你需要明白他们也是options初始化配置的一部分。

fn callback(x, y)

当拖放动作释放时触发，携带表示手柄位置的参数x/y。由于步数约束和拖动动作的影响，参数的值是手柄完成滑动动画后的滑块的值。

fn dragStopCallback(x, y)

和callback(x,y) 一样，但只在真正拖动时才触发，程序修改手柄位置不触发此事件。

fn dragStartCallback(x, y)

和dragStopCallback(x,y) 一样，但只在拖动开始时触发，参数值为拖动前的位置。

fn animationCallback(x, y)

只要有动画就触发，这是连续触发的事件，可以实时监听滑块位置。参数值表示手柄Dom元素的实际位置，当loose设置true时，它也包括超越边界的位置(可能为负数)。

disable

禁用拖动组件，相当于设置disabled选项，拖动组件被设置<code>.disabled</code>类。

enable

启用拖动组件，手柄的<code>.disabled</code> 类将被移除。

reflow

重新计算包装器边界。适用于当包装器是响应式的，而且它的父容器改变了尺寸时，或者包装器本身的尺寸改变了。

getValue

编程方式获取拖动组件的值，返回值为 [x, y] 元组，它的值等于正常回调的映射值，不包括animationCallback回调。

getStep

和getValue类似，但它返回的是步数。如果没有设置steps，该方法返回[NaN,NaN]

setValue(x, y, snap=false)

设置拖动组件的值，第三个参数为是否直接切换位置，而不采用滑动过渡。

setStep(x, y, snap=false)

与setValue(x, y, snap=false) 类似，但位置单位为步数。

用户可以使用slider滑动器，通过拖动滑块改变数值，如一个input容器的值。基于这个目的，<code>animationCallback</code>将是最好的帮手，使用它你可以让用户输入数据使用更形象的方式。

控制不同的元素是Dragdealer最直接的用法。这需要一点简单的数学知识，就可以让它垂直运动。

yPrecision选项用于调整callback参数值的垂直间隔，当控制一个大于Dragdealer包装器的元素时是很有用的。

iPhone滑动解锁的效果。经典效果：

现在ios已经变化了，新的效果：

本例的这些demo单纯去准确的复制出解锁的效果也没什么实际意义，但却可以提现出Dragdealer的灵活性。

后一个示例中手柄大于包裹器，所以设置了<code>overflow: hidden;</code>去遮罩超出的部分。建议参照html和css去更好的理解。

[原文]让我们来点高级应用(译者：脑子已经跟不上了，以下晕菜…)。拖动手柄是一串图片，组件包装器的大小是一张图片的大小。

speed选项可以控制滑动动画的速度，取值为[0,1]之间的浮点数，缺省为0.1.

说白了就好像从一个窗户看外面的风景，可以拖动。

Dragdealer 只是一个拖动组件，其它的交给你了。