Dragdealer.js 网页元素拖拽滑动 JavaScript 插件

Question

Dragdealer 用来帮你实现网页上元素的拖拉（不是拖放）效果，例如一个滑动块的效果。而且该 JS 库也支持 iPhone 和 Android 的手机，Dragdealer.js 是一个基于 JavaScript 组件的类库，能让您的网站实现拖拉的超酷效果，支持鼠标的拖动和点击事件。

快速使用

<div id="demo-simple-slider" class="dragdealer">
  <div class="handle red-bar">drag me</div>
</div>

new Dragdealer('demo-simple-slider');

可选参数

在这里是选择，回调方法dragdealer支持，但是你可以阅读源代码更多的信息。

• Dragdealer(wrapper, options={}) 接受一个ID或包装元素的DOM的参考。看到可能的选项。

• bool disabled=false 初始化dragdealer处于禁用状态。
• bool horizontal=true 使水平拖动。
• bool vertical=false 使垂直拖动。
• number x=0 初始水平（左）位置。接受一个0和1之间的实数值。
• number y=0 初始垂直（上）位置。接受一个0和1之间的实数值。
• number steps=0 Limit the positioning of the handle within the bounds of the wrapper, by defining a virtual grid made out of a number of equally-spaced steps. This restricts placing the handle anywhere in-between these steps. E.g. setting 3 steps to a regular slider will only allow you to move it to the left, to the right or exactly in the middle.
• bool snap=false When a number of steps is set, snap the position of the handle to its closest step instantly, even when dragging.
• bool slide=true Slide handle after releasing it, depending on the movement speed before the mouse/touch release.
• bool loose=false Loosen-up wrapper boundaries when dragging. This allows the handle to be *slightly* dragged outside the bounds of the wrapper, but slides it back to the margins of the wrapper upon release.
• number top=0 Top padding between the wrapper and the handle.
• number bottom=0 Bottom padding between the wrapper and the handle.
• number left=0 Left padding between the wrapper and the handle.
• number right=0 Right padding between the wrapper and the handle.
• fn callback(x, y) Called when releasing handle, with the projected x, y position of the handle. Projected value means the value the slider will have after finishing a sliding animation, caused by either a step restriction or drag motion (see steps and slide options.)
• fn animationCallback(x, y) Called every animation loop, as long as the handle is being dragged or in the process of a sliding animation. The x, y positional values received by this callback reflect the exact position of the handle DOM element, which includes exceeding values (even negative values) when the loose option is set true.
• string handleClass=handle Custom class of handle element.
• bool css3=true Use css3 transform in modern browsers instead of absolute positioning.
• bool requestAnimationFrame=false Animate with requestAnimationFrame or setTimeout polyfill instead of default setInterval animation.

方法函数

• disable Disable dragging of a Dragdealer instance. Just as with the disabled option, the handle will receive a .disabled class
• enable Enable dragging of a Dragdealer instance. The .disabled class of the handle will be removed.
• reflow Recalculate the wrapper bounds of a Dragdealer instance, used when the wrapper is responsive and its parent container changed its size, or after changing the size of the wrapper directly.
• getValue Get the value of a Dragdealer instance programatically. The value is returned as an [x, y] tuple and is the equivalent of the projected value returned by the regular callback, not animationCallback.
• getStep Same as getValue, but the value returned is in step increments (see steps option)
• setValue(x, y, snap=false) Set the value of a Dragdealer instance programatically. The 3rd parameter allows to snap the handle directly to the desired value, without any sliding transition.
• setStep(x, y, snap=false) Same as setValue, but the value is received in step increments (see steps option)

官方网站 | 下载地址 | 在线 Demo