draggabilly是一款功能強(qiáng)大的網(wǎng)頁(yè)元素拖動(dòng)拖拽插件。該元素拖拽插件可以和jQuery結(jié)合使用，也可以以純js的方式使用。它提供了強(qiáng)大的拖拽元素的能力，并且可以支持IE8瀏覽器和移動(dòng)觸摸設(shè)備。

在線預(yù)覽    源碼下載

 使用方法

 安裝

可以通過bower或npm來安裝該draggabilly插件。

bower install draggabillynpm install draggabilly                              

 作為jQuery插件來使用

var $draggable = $('.draggable').draggabilly({  // options...})                           

 通過純JS來初始化該拖動(dòng)元素插件

var elem = document.querySelector('.draggable');var draggie = new Draggabilly( elem, {  // options...});// or pass in selector string as first argumentvar draggie = new Draggabilly( '.draggable', {  // options...});// if you have multiple .draggable elements// get all draggie elementsvar draggableElems = document.querySelectorAll('.draggable');// array of Draggabilliesvar draggies = []// init Draggabilliesfor ( var i=0, len = draggableElems.length; i < len; i++ ) {  var draggableElem = draggableElems[i];  var draggie = new Draggabilly( draggableElem, {    // options...  });  draggies.push( draggie );}                            

 CSS樣式

插件在拖動(dòng)元素的時(shí)候會(huì)附加兩個(gè)class類：

• .is-pointer-down：當(dāng)用戶第一次點(diǎn)擊元素（mouse, touch, pointer）是添加的class。
• .is-dragging：當(dāng)元素開始拖動(dòng)的時(shí)候添加的class。

 配置參數(shù)

• axis：類型：String，可用值：'x' 或 'y'。約束元素只能在X或Y軸移動(dòng)。
• containment：類型：Element，Selector String或Boolean。約束元素只能在指定的容器中拖動(dòng)。如果設(shè)置為true，那么約束容器就是該元素的父元素。
• grid：類型：Array，可用值：[ x, y ]。元素拖動(dòng)是會(huì)以網(wǎng)格的方式進(jìn)行吸附。
• handle：類型：Selector String。指定拖動(dòng)交互的元素。

 事件

 通過jQuery來綁定事件

可以通過標(biāo)準(zhǔn)的jQuery事件：.on()，.off()，.one()來綁定事件，在事件內(nèi)部，this引用就是Draggabilly元素。

// jQueryfunction listener(/* parameters */) {  // 獲取Draggabilly對(duì)象實(shí)例  var draggie = $(this).data('draggabilly');  console.log( 'eventName happened', draggie.position.x, draggie.position.y );}// 綁定事件監(jiān)聽$draggable.on( 'eventName', listener );// 移除事件監(jiān)聽$draggable.off( 'eventName', listener );// 只綁定一次事件，注意是ONCE，而不是ONE或ON$draggable.one( 'eventName', function() {  console.log('eventName happened just once');});                              

 通過純JS來綁定事件

也可以通過純JS使用.on()，.off()，.one()方法來綁定事件，在事件內(nèi)部，this引用就是Draggabilly元素。

// vanilla JSfunction listener(/* parameters */) {  console.log( 'eventName happened', this.position.x, this.position.y );}// 綁定事件監(jiān)聽draggie.on( 'eventName', listener );// 移除事件監(jiān)聽draggie.off( 'eventName', listener );// 只綁定一次事件，注意是ONCE，而不是ONE或ONdraggie.once( 'eventName', function() {  console.log('eventName happened just once');});                              

dragStart

在拖動(dòng)開始，元素移動(dòng)的時(shí)候觸發(fā)。

// jQuery$draggable.on( 'dragStart', function( event, pointer ) {...})// vanilla JSdraggie.on( 'dragStart', function( event, pointer ) {...})                              

• event：類型：Event。原生的mousedown或touchstart事件。
• pointer：類型：MouseEvent或Touch。有.pageX和.pageY的事件對(duì)象。

dragMove

在拖拽元素移動(dòng)的時(shí)候觸發(fā)。

// jQuery$draggable.on( 'dragMove', function( event, pointer, moveVector ) {...})// vanilla JSdraggie.on( 'dragMove', function( event, pointer, moveVector ) {...})                              

• event：類型：Event。原生的mousemove或touchmove事件。
• pointer：類型：MouseEvent或Touch。有.pageX和.pageY的事件對(duì)象。
• moveVector：類型：Object。鼠標(biāo)指針移動(dòng)到距離開始移動(dòng)位置有多遠(yuǎn)：{ x: 20, y: -30 }。

dragEnd

當(dāng)元素拖動(dòng)結(jié)束的時(shí)候觸發(fā)。

// jQuery$draggable.on( 'dragEnd', function( event, pointer ) {...})// vanilla JSdraggie.on( 'dragEnd', function( event, pointer ) {...})                              

• event：類型：Event。原生的mouseup或touchend事件。
• pointer：類型：MouseEvent或Touch。有.pageX和.pageY的事件對(duì)象。

pointerDown

當(dāng)用戶指針（mouse, touch, pointer）被按下的時(shí)候觸發(fā)。

// jQuery$draggable.on( 'pointerDown', function( event, pointer ) {...})// vanilla JSdraggie.on( 'pointerDown', function( event, pointer ) {...})                            

• event：類型：Event。原生的mousedown或touchstart事件。
• pointer：類型：MouseEvent或Touch。有.pageX和.pageY的事件對(duì)象。

pointerMove

當(dāng)用戶指針移動(dòng)的時(shí)候觸發(fā)。

// jQuery$draggable.on( 'pointerMove', function( event, pointer, moveVector ) {...})// vanilla JSdraggie.on( 'pointerMove', function( event, pointer, moveVector ) {...})                          

• event：類型：Event。原生的mousemove或touchmove事件。
• pointer：類型：MouseEvent或Touch。有.pageX和.pageY的事件對(duì)象。
• moveVector：類型：Object。鼠標(biāo)指針移動(dòng)到距離開始移動(dòng)位置有多遠(yuǎn)：{ x: 20, y: -30 }。

pointerUp

當(dāng)用戶指針被松開的時(shí)候觸發(fā)。

// jQuery$draggable.on( 'pointerUp', function( event, pointer ) {...})// vanilla JSdraggie.on( 'pointerUp', function( event, pointer ) {...})                         

• event：類型：Event。原生的mouseup或touchend事件。
• pointer：類型：MouseEvent或Touch。有.pageX和.pageY的事件對(duì)象。

staticClick

在用戶指針被按下不松開，并且沒有移動(dòng)的時(shí)候觸發(fā)。

// jQuery$draggable.on( 'staticClick', function( event, pointer ) {...})// vanilla JSdraggie.on( 'staticClick', function( event, pointer ) {...})                              

• event：類型：Event。原生的mouseup或touchend事件。
• pointer：類型：MouseEvent或Touch。有.pageX和.pageY的事件對(duì)象。

 方法

disable

// jQuery$draggable.draggabilly('disable')// vanilla JSdraggie.disable()                              

enable

// jQuery$draggable.draggabilly('enable')// vanilla JSdraggie.enable()                             

destroy

// jQuery$draggable.draggabilly('destroy')// vanilla JSdraggie.destroy()                          

jQuery.fn.data('draggabilly')：從jQuery對(duì)象中獲取Draggabilly實(shí)例。

var draggie = $('.draggable').data('draggabilly')// access Draggabilly 
Draggabilly官方主頁(yè)：http://draggabilly.desandro.com/