拖拽插件使用说明

使用

初始化draggabilly为一个jQuery插件

var $draggable = $('.draggable').draggabilly({  // 选项（配置）...})
1
2
3

使用原生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 );}
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’

axis: 'x'
1

元素允许在水平或垂直方向上拖动，默认是水平垂直均可

containment

类型：元素、选择器字符串 或 布尔值

containment: '.container'
1

包含元素边界的移动。如果true，容器将是父元素。

grid

类型： 数组（Array） 
值： [ x, y ]

grid: [ 20, 20 ]
1

网格式移动元素，每x和y像素移动元素

handle

类型： 选择器字符串

handle: '.handle'
1

指定拖动交互开始的元素。 
句柄（操作器）是有用的，当你不想所有的内部元素被用于拖动，如输入和表单。

事件

使用jquery标准事件.on()、.off()、和.one().，事件里面的this指向当前拖拽的元素。

// jQueryfunction 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');});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

使用原生js绑定事件.on()、.off()、和.once()，在事件里this指向当前拖拽的元素。

// 原生JSfunction listener(/* 参数 */) {  console.log( 'eventName happened', this.position.x, this.position.y );}// 绑定事件监听draggie.on( 'eventName', listener );// 移除事件监听draggie.off( 'eventName', listener );// 只触发一次事件监听。注意是once不是one或者ondraggie.once( 'eventName', function() {  console.log('eventName happened just once');});
1
2
3
4
5
6
7
8
9
10
11
12

dragStart

拖动开始移动前触发，当移动小于2像素时表现为点击。

// jQuery$draggable.on( 'dragStart', function( event, pointer ) {...})// 原生JSdraggie.on( 'dragStart', function( event, pointer ) {...})
1
2
3
4

• event - 类型: 事件 - 原生的mousedown或touchstart事件
• pointer - 类型: 鼠标事件（MouseEvent）或触控事件（Touch）对象 - 这个事件对象有.pageX和.pageY

dragMove

当元素移动时触发。

// jQuery$draggable.on( 'dragMove', function( event, pointer, moveVector ) {...})// 原生JSdraggie.on( 'dragMove', function( event, pointer, moveVector ) {...})
1
2
3
4

• event - 类型: 事件 - 原生的mousemove或者touchmove事件
• pointer - 类型: 鼠标事件（MouseEvent）或触控事件（Touch）对象 - 事件对象有.pageX和.pageY
• moveVector - 类型: 对象 - 当前位置离初始位置的位移 { x: 20, y: -30 }

dragEnd

当元素停止移动时触发。

// jQuery$draggable.on( 'dragEnd', function( event, pointer ) {...})// 原生JSdraggie.on( 'dragEnd', function( event, pointer ) {...})
1
2
3
4

• event - 类型: 事件 - the original mouseup or touchend event
• pointer - 类型: 鼠标事件（MouseEvent）或触控事件（Touch）对象 - 事件对象有.pageX和.pageY

pointerDown

当用户指针按下（鼠标、触摸）时触发。

// jQuery$draggable.on( 'pointerDown', function( event, pointer ) {...})// 原生JSdraggie.on( 'pointerDown', function( event, pointer ) {...})
1
2
3
4

• event - 类型: 事件 - the original mouseup or touchend event
• pointer - 类型: 鼠标事件（MouseEvent）或触控事件（Touch）对象 - 事件对象有.pageX和.pageY

pointerMove

当用户的指针移动时触发。

// jQuery$draggable.on( 'pointerMove', function( event, pointer, moveVector ) {...})// 原生JSdraggie.on( 'pointerMove', function( event, pointer, moveVector ) {...})
1
2
3
4

• event - 类型: 事件 - 原生的mousemove或者touchmove事件
• pointer - 类型: 鼠标事件（MouseEvent）或触控事件（Touch）对象 - 事件对象有.pageX和.pageY
• moveVector - 类型: 对象 - 当前位置离初始位置的位移 { x: 20, y: -30 }

pointerUp

当用户指针离开元素时触发。

// jQuery$draggable.on( 'pointerUp', function( event, pointer ) {...})// 原生JSdraggie.on( 'pointerUp', function( event, pointer ) {...})
1
2
3
4

• event - 类型: 事件 - the original mouseup or touchend event
• pointer - 类型: 鼠标事件（MouseEvent）或触控事件（Touch）对象 - 事件对象有.pageX和.pageY

staticClick

用户的指针压下并没有开始拖动。 
单击事件很难拖动界面检测，因为他们是当用户的鼠标触发。draggabilly的staticclick事件解决了，因为它被触发时，用户没有拖。

// jQuery$draggable.on( 'staticClick', function( event, pointer ) {...})// 原生JSdraggie.on( 'staticClick', function( event, pointer ) {...})
1
2
3
4

• event - 类型: 事件 - the original mouseup or touchend event
• pointer - 类型: 鼠标事件（MouseEvent）或触控事件（Touch）对象 - 事件对象有.pageX和.pageY

方法

disable

// jQuery$draggable.draggabilly('disable')// vanilla JSdraggie.disable()
1
2
3
4

enable

// jQuery$draggable.draggabilly('enable')// vanilla JSdraggie.enable()
1
2
3
4

destroy

// jQuery$draggable.draggabilly('destroy')// vanilla JSdraggie.destroy()
1
2
3
4

jQuery.fn.data(‘draggabilly’)

从一个jQuery对象得到draggabilly实例。draggabilly实例访问draggabilly有用的属性。

var draggie = $('.draggable').data('draggabilly')// access Draggabilly propertiesconsole.log( 'draggie at ' + draggie.position.x + ', ' + draggie.position.y )
1
2
3

Properties（属性）

position

{ x: 20, y: -30 }
1

• x 整数
• y 整数