使用
初始化draggabilly为一个jQuery插件
- 1
- 2
- 3
使用原生js初始化
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
相关的class
- .is-pointer-down
当用户鼠标第一次点击(或触摸)时添加
- .is-dragging
当元素开始拖拽时添加
选项(配置)
axis
类型: 字符串(String)
值: ‘x’ 或者 ‘y’
- 1
元素允许在水平或垂直方向上拖动,默认是水平垂直均可
containment
类型:元素、选择器字符串 或 布尔值
- 1
包含元素边界的移动。如果true
,容器将是父元素。
grid
类型: 数组(Array)
值: [ x, y ]
- 1
网格式移动元素,每x和y像素移动元素
handle
类型: 选择器字符串
- 1
指定拖动交互开始的元素。
句柄(操作器)是有用的,当你不想所有的内部元素被用于拖动,如输入和表单。
事件
使用jquery标准事件.on()
、.off()
、和.one()
.,事件里面的this
指向当前拖拽的元素。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
使用原生js绑定事件.on()
、.off()
、和.once()
,在事件里this
指向当前拖拽的元素。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
dragStart
拖动开始移动前触发,当移动小于2像素时表现为点击。
- 1
- 2
- 3
- 4
event
- 类型: 事件 - 原生的mousedown
或touchstart
事件pointer
- 类型: 鼠标事件(MouseEvent)或触控事件(Touch)对象 - 这个事件对象有.pageX
和.pageY
dragMove
当元素移动时触发。
- 1
- 2
- 3
- 4
event
- 类型: 事件 - 原生的mousemove
或者touchmove
事件pointer
- 类型: 鼠标事件(MouseEvent)或触控事件(Touch)对象 - 事件对象有.pageX
和.pageY
moveVector
- 类型: 对象 - 当前位置离初始位置的位移{ x: 20, y: -30 }
dragEnd
当元素停止移动时触发。
- 1
- 2
- 3
- 4
event
- 类型: 事件 - the original mouseup or touchend eventpointer
- 类型: 鼠标事件(MouseEvent)或触控事件(Touch)对象 - 事件对象有.pageX
和.pageY
pointerDown
当用户指针按下(鼠标、触摸)时触发。
- 1
- 2
- 3
- 4
event
- 类型: 事件 - the original mouseup or touchend eventpointer
- 类型: 鼠标事件(MouseEvent)或触控事件(Touch)对象 - 事件对象有.pageX
和.pageY
pointerMove
当用户的指针移动时触发。
- 1
- 2
- 3
- 4
event
- 类型: 事件 - 原生的mousemove
或者touchmove
事件pointer
- 类型: 鼠标事件(MouseEvent)或触控事件(Touch)对象 - 事件对象有.pageX
和.pageY
moveVector
- 类型: 对象 - 当前位置离初始位置的位移{ x: 20, y: -30 }
pointerUp
当用户指针离开元素时触发。
- 1
- 2
- 3
- 4
event
- 类型: 事件 - the original mouseup or touchend eventpointer
- 类型: 鼠标事件(MouseEvent)或触控事件(Touch)对象 - 事件对象有.pageX
和.pageY
staticClick
用户的指针压下并没有开始拖动。
单击事件很难拖动界面检测,因为他们是当用户的鼠标触发。draggabilly的staticclick事件解决了,因为它被触发时,用户没有拖。
- 1
- 2
- 3
- 4
event
- 类型: 事件 - the original mouseup or touchend eventpointer
- 类型: 鼠标事件(MouseEvent)或触控事件(Touch)对象 - 事件对象有.pageX
和.pageY
方法
disable
- 1
- 2
- 3
- 4
enable
- 1
- 2
- 3
- 4
destroy
- 1
- 2
- 3
- 4
jQuery.fn.data(‘draggabilly’)
从一个jQuery对象得到draggabilly实例。draggabilly实例访问draggabilly有用的属性。
- 1
- 2
- 3
Properties(属性)
position
- 1
x
整数y
整数