Draggabilly中文文档
Draggabilly中文文档
根据Draggabilly官方文档翻译,由于英文水平有限,部分内容可能有误。本文档只翻译了主要的选项配置等,想了解更多请查看官方文档。
js拖拽插件
1.0版本支持ie8+和多点触控
2.0版本支持ie10+和多点触控
github地址
安装
获取源码打包文件
- draggabilly.pkgd.min.js 压缩版
- draggabilly.pkgd.js 未压缩版
包管理工具
使用npm安装:npm install draggabilly
使用Bower安装:bower install draggabilly
CDN
通过cdn直接链接到Draggabilly文件
<!-- 1.0版本 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/draggabilly/1.2.4/draggabilly.pkgd.min.js"></script>
<!-- 或者 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/draggabilly/1.2.4/draggabilly.pkgd.js"></script><!-- 2.0版本 -->
<script src="https://unpkg.com/draggabilly@2/dist/draggabilly.pkgd.min.js"></script>
<!-- 或者 -->
<script src="https://unpkg.com/draggabilly@2/dist/draggabilly.pkgd.js"></script>
使用
初始化draggabilly为一个jQuery插件
var $draggable = $('.draggable').draggabilly({// 选项(配置)...
})
使用原生js初始化
var elem = document.querySelector('.draggable');
var draggie = new Draggabilly( elem, {// 选项...
});// 或者直接将元素作为第一个参数
var draggie = new Draggabilly( '.draggable', {// 选项...
});// 如果你有多个.draggable元素
// 首先获取所有的拖拽元素
var draggableElems = document.querySelectorAll('.draggable');
// 设置一个数组用来存放初始化后的所有拖拽元素
var draggies = []
// 初始化
for ( var i=0, len = draggableElems.length; i < len; i++ ) {var draggableElem = draggableElems[i];var draggie = new Draggabilly( draggableElem, {// 选项...});draggies.push( draggie );
}
相关的class
- .is-pointer-down
当用户鼠标第一次点击(或触摸)时添加
- .is-dragging
当元素开始拖拽时添加
选项(配置)
axis
类型: 字符串(String)
值: ‘x’ 或者 ‘y’
axis: 'x'
元素允许在水平或垂直方向上拖动,默认是水平垂直均可
containment
类型:元素、选择器字符串 或 布尔值
containment: '.container'
包含元素边界的移动。如果true
,容器将是父元素。
grid
类型: 数组(Array)
值: [ x, y ]
grid: [ 20, 20 ]
网格式移动元素,每x和y像素移动元素
handle
类型: 选择器字符串
handle: '.handle'
指定拖动交互开始的元素。
句柄(操作器)是有用的,当你不想所有的内部元素被用于拖动,如输入和表单。
事件
使用jquery标准事件.on()
、.off()
、和.one()
.,事件里面的this
指向当前拖拽的元素。
// jQuery
function listener(/* 参数 */) {// 获取拖拽元素实例var draggie = $(this).data('draggabilly');console.log( 'eventName happened', draggie.position.x, draggie.position.y );
}
// 绑定事件监听
$draggable.on( 'eventName', listener );
// 移除事件监听
$draggable.off( 'eventName', listener );
// 只触发一次事件监听。注意是one不是on
$draggable.one( 'eventName', function() {console.log('eventName happened just once');
});
使用原生js绑定事件.on()
、.off()
、和.once()
,在事件里this
指向当前拖拽的元素。
// 原生JS
function listener(/* 参数 */) {console.log( 'eventName happened', this.position.x, this.position.y );
}
// 绑定事件监听
draggie.on( 'eventName', listener );
// 移除事件监听
draggie.off( 'eventName', listener );
// 只触发一次事件监听。注意是once不是one或者on
draggie.once( 'eventName', function() {console.log('eventName happened just once');
});
dragStart
拖动开始移动前触发,当移动小于2像素时表现为点击。
// jQuery
$draggable.on( 'dragStart', function( event, pointer ) {...})
// 原生JS
draggie.on( 'dragStart', function( event, pointer ) {...})
event
- 类型: 事件 - 原生的mousedown
或touchstart
事件pointer
- 类型: 鼠标事件(MouseEvent)或触控事件(Touch)对象 - 这个事件对象有.pageX
和.pageY
dragMove
当元素移动时触发。
// jQuery
$draggable.on( 'dragMove', function( event, pointer, moveVector ) {...})
// 原生JS
draggie.on( 'dragMove', function( event, pointer, moveVector ) {...})
event
- 类型: 事件 - 原生的mousemove
或者touchmove
事件pointer
- 类型: 鼠标事件(MouseEvent)或触控事件(Touch)对象 - 事件对象有.pageX
和.pageY
moveVector
- 类型: 对象 - 当前位置离初始位置的位移{ x: 20, y: -30 }
dragEnd
当元素停止移动时触发。
// jQuery
$draggable.on( 'dragEnd', function( event, pointer ) {...})
// 原生JS
draggie.on( 'dragEnd', function( event, pointer ) {...})
event
- 类型: 事件 - the original mouseup or touchend eventpointer
- 类型: 鼠标事件(MouseEvent)或触控事件(Touch)对象 - 事件对象有.pageX
和.pageY
pointerDown
当用户指针按下(鼠标、触摸)时触发。
// jQuery
$draggable.on( 'pointerDown', function( event, pointer ) {...})
// 原生JS
draggie.on( 'pointerDown', function( event, pointer ) {...})
event
- 类型: 事件 - the original mouseup or touchend eventpointer
- 类型: 鼠标事件(MouseEvent)或触控事件(Touch)对象 - 事件对象有.pageX
和.pageY
pointerMove
当用户的指针移动时触发。
// jQuery
$draggable.on( 'pointerMove', function( event, pointer, moveVector ) {...})
// 原生JS
draggie.on( 'pointerMove', function( event, pointer, moveVector ) {...})
event
- 类型: 事件 - 原生的mousemove
或者touchmove
事件pointer
- 类型: 鼠标事件(MouseEvent)或触控事件(Touch)对象 - 事件对象有.pageX
和.pageY
moveVector
- 类型: 对象 - 当前位置离初始位置的位移{ x: 20, y: -30 }
pointerUp
当用户指针离开元素时触发。
// jQuery
$draggable.on( 'pointerUp', function( event, pointer ) {...})
// 原生JS
draggie.on( 'pointerUp', function( event, pointer ) {...})
event
- 类型: 事件 - the original mouseup or touchend eventpointer
- 类型: 鼠标事件(MouseEvent)或触控事件(Touch)对象 - 事件对象有.pageX
和.pageY
staticClick
用户的指针压下并没有开始拖动。
单击事件很难拖动界面检测,因为他们是当用户的鼠标触发。draggabilly的staticclick事件解决了,因为它被触发时,用户没有拖。
// jQuery
$draggable.on( 'staticClick', function( event, pointer ) {...})
// 原生JS
draggie.on( 'staticClick', function( event, pointer ) {...})
event
- 类型: 事件 - the original mouseup or touchend eventpointer
- 类型: 鼠标事件(MouseEvent)或触控事件(Touch)对象 - 事件对象有.pageX
和.pageY
方法
disable
// jQuery
$draggable.draggabilly('disable')
// vanilla JS
draggie.disable()
enable
// jQuery
$draggable.draggabilly('enable')
// vanilla JS
draggie.enable()
destroy
// jQuery
$draggable.draggabilly('destroy')
// vanilla JS
draggie.destroy()
jQuery.fn.data(‘draggabilly’)
从一个jQuery对象得到draggabilly实例。draggabilly实例访问draggabilly有用的属性。
var draggie = $('.draggable').data('draggabilly')
// access Draggabilly properties
console.log( 'draggie at ' + draggie.position.x + ', ' + draggie.position.y )
Properties(属性)
position
{ x: 20, y: -30 }
x
整数y
整数
Draggabilly中文文档相关推荐
- PyTorch官方中文文档:torch.optim 优化器参数
内容预览: step(closure) 进行单次优化 (参数更新). 参数: closure (callable) –...~ 参数: params (iterable) – 待优化参数的iterab ...
- golang中文文档_Golang 标准库 限流器 time/rate 设计与实现
限流器是后台服务中十分重要的组件,在实际的业务场景中使用居多,其设计在微服务.网关.和一些后台服务中会经常遇到.限流器的作用是用来限制其请求的速率,保护后台响应服务,以免服务过载导致服务不可用现象出现 ...
- springboot中文文档_登顶 Github 的 Spring Boot 仓库!艿艿写的最肝系列
源码精品专栏 中文详细注释的开源项目 RPC 框架 Dubbo 源码解析 网络应用框架 Netty 源码解析 消息中间件 RocketMQ 源码解析 数据库中间件 Sharding-JDBC 和 My ...
- Apache Spark 2.2.0 中文文档 翻译活动
为什么80%的码农都做不了架构师?>>> Spark 2.2.0 已然发布(2017-07-11 发布) 5 天了,更新了一些新套路吧! 此版本从 Structured Str ...
- Python爱好者周知:Scikit-Learn中文文档正式发布
整理 | 费棋 出品 | AI科技大本营(公众号ID:rgznai100) 近日,Scikit-Learn 中文文档已由开源组织 ApacheCN 完成校对.该中文文档依然包含了 Scikit-Lea ...
- GitHub 中文文档正式发布
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试资料 中国作为全球最大的人口大国,所属开发者在 GitHub 上的占比自 ...
- 推荐:Webpack2入门到深入的中文文档
2019独角兽企业重金招聘Python工程师标准>>> 最近看了一本不错的<<webpack2中文文档>>的PDF,对比于wepack2官网(https:// ...
- matlab中文文档_Linux下Matlab安装
如果觉得文章好看,欢迎点赞.同时欢迎关注微信公众号:氷泠之路. 引言 抱歉国庆由于各种原因一直没空更新文章,啊啊啊啊啊.... 因为在忙各种各样的事情,都怪女朋友,另外也更新了"装备&quo ...
- 使用编译器——Solidity中文文档(8)
写在前面:HiBlock区块链社区成立了翻译小组,翻译区块链相关的技术文档及资料,本文为Solidity文档翻译的第八部分<使用编译器>,特发布出来邀请solidity爱好者.开发者做公开 ...
最新文章
- Ubuntu下 安装 window 虚拟机
- patch -p0 和patch -p1的区别
- python创建新进程_Python os.fork()方法:创建新进程
- mysql currentuser_MySQL中DATABASE()和CURRENT_USER()函数的示例详解
- Java多线程编程(1)--Java中的线程
- mooon编译系统介绍(可复用Makefile)
- centos6下安装php7的memcached扩展
- 【树状数组】【P3608】平衡的照片
- 十六进制换算成二进制、八进制、十进制
- Windows系统重装Linux系统
- how-to-solve-the-specific-problem,learn-this,imitate-this
- 计算机平面设计是计算机类吗,计算机平面设计是什么?平面设计就业前景怎么样?...
- PHP 依赖注入 容器,PHP 依赖注入容器 Pimple 笔记
- keytool 错误: java.io.IOException: Keystore was tampered with, or password was incorrect----gt;解决方法
- Android图片太大导致无法正常显示
- IBM Cloud VPC网络与本地办公网络的互通
- 业务流程监控的几点建议
- 上海矽昌通信技术有限公司自研路由芯片
- 访客管理系统 - 天天访客
- Android设备唯一码的获取