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

发布于 2018-07-19 21:37:35 字数 4912 浏览 3198 评论 0

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

淹不死的鱼

文章 0 评论 0

zhangMack

文章 0 评论 0

爱的故事

文章 0 评论 0

linces

文章 0 评论 0

早乙女

文章 0 评论 0

鸵鸟症

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。