JQuery UI的拖拽功能實現(xiàn)方法小結(jié)

更新時間：2012年03月14日 11:07:40 作者：

JQuery UI是JQuery官方支持的WebUI 代碼庫，包含底層交互、動畫、特效等API，并且封裝了一些Web小部件（Widget）。同時，JQuery UI繼承了jquery的插件支持，有大量的第三方插件可以豐富JQuery UI的功能

JQuery UI提供的API極大簡化了拖拽功能的開發(fā)。只需要分別在拖拽源(source)和目標(biāo)(target)上調(diào)用draggable和droppable兩個函數(shù)即可。

拖拽原理
首先要明確幾個概念。
　　ource：拖拽源，要拖動的元素。
　　taerget：拖放目標(biāo)，能夠放入source的容器。
拖拽的動作分解如下：
　　1. drag start：在拖拽源(source)上按下鼠標(biāo)并開始移動
　　2. drag move: 移動過程中
　　3. drag enter: 移動進(jìn)入目標(biāo)(target)容器
　　4. drag leave: 移出目標(biāo)(target)容器
　　5. drop: 在目標(biāo)(target)容器上釋放鼠標(biāo)
　　6. drag end: 結(jié)束
在html5之前，頁面元素不直接支持拖拽事件。所以都是通過監(jiān)聽鼠標(biāo)事件并記錄拖拽狀態(tài)的方式來實現(xiàn)拖拽功能。

最簡單的例子
最簡單的拖拽是不改變元素所在的容器，而只改變其位置。例子如下：

復(fù)制代碼代碼如下:

 
<html> 
<head></head> 
<body> 
<div id="container"> 
<div id="dragsource"> 
<p>拽我!</p> 
</div> 
</div><!-- End container --> 
<script type="text/javascript" src="js/jquery-1.7.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> 
<script> 
$(function() { 
$( "#dragsource" ).draggable(); 
}) 
</script> 
</body> 
</html> 

拖動到另一個容器
更常見的場景是將元素拖動到另一個容器中。這就需要在drop目標(biāo)(target)容器上應(yīng)用droppable函數(shù)。讓我們在上一個例子的基礎(chǔ)上，增加一個div作為容器，并應(yīng)用droppable函數(shù)：

復(fù)制代碼代碼如下:

 
<html> 
<head></head> 
<body> 
<div id="container"> 
<div id="dragsource"> 
<p>拽我!</p> 
</div> 
</div><!-- End container --> 

<div id="droppalbe" style="width: 300px;height:300px;background-color:gray"> 
<p>Drop here</p> 
</div> 

<script type="text/javascript" src="js/jquery-1.7.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> 
<script> 
$(function() { 
$( "#dragsource" ).draggable(); 
$( "#droppable" ).droppable(); 
}) 
</script> 
</body> 
</html> 

事件監(jiān)聽和回顯（Feedback）
運(yùn)行上一個例子，你可能會產(chǎn)生疑惑，真的放到目標(biāo)容器上了嗎？用戶也會產(chǎn)生同樣的疑惑。所以，可以監(jiān)聽拖動過程中發(fā)生的一些事件，并用可見的方式讓用戶知道。這就叫做回顯（Feedback）。

對于源（source)，可以監(jiān)聽的事件包括：

　　create: 在source上應(yīng)用draggable函數(shù)時觸發(fā)
　　start：開始拖動時觸發(fā)
　　drap：拖動過程中觸發(fā)
　　stop：釋放時觸發(fā)
對于目標(biāo)（target）,可以監(jiān)聽的事件包括：
　　create: 在target上應(yīng)用droppable函數(shù)時觸發(fā)
　　activate：如果當(dāng)前拖動的source可以drop到本target，則觸發(fā)
　　deactivate：如果可以drop到本target的拖拽停止，則觸發(fā)
　　over：source被拖動到target上面
　　out：source被拖動離開target
　　drop：source被釋放到target
事件處理函數(shù)都是通過draggable和droppable函數(shù)的參數(shù)傳遞，在這些事件處理函數(shù)中就可以進(jìn)行Feedback?？匆幌聦嶋H的例子：

復(fù)制代碼代碼如下:

 
<html> 
<head> 

</head> 
<body> 
<div id="dragsource"> 
<p id="targetMsg">:-|</p> 
</div> 

<div id="droppable" style="background-color:gray;height:300"> 
<p>Can drop! </p> 
</div> 

<script type="text/javascript" src="js/jquery-1.7.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> 
<script> 
$(function() { 
$( "#dragsource" ).draggable({ 
start: function(event,ui) { 
$(this).find("p").html(":-S"); 
}, 
stop:function(event,ui){ 
$(this).find("p").html(":-|"); 
} 
}); 

$( "#droppable" ).droppable({ 
activate: function(event,ui) { 
$(this).find("p").html( "Drop here !" ); 
}, 
over: function(event,ui) { 
$( this ).find( "p" ).html( "Oh, Yeah!" ); 

}, 
out: function(event,ui) { 
$( this ).find( "p" ).html( "Don't leave me!" ); 

}, 
drop: function( event, ui ) { 
$( this ).find( "p" ).html( "I've got it!" ); 
} 
}); 
}) 
</script> 
</body> 
</html> 

復(fù)制拖動
前面的例子都是移動元素，另一種常見的場景是復(fù)制拖動。比如visio中的從畫板中拖動元素到畫布。這是通過draggable函數(shù)的helper參數(shù)設(shè)定的。

helper可以指定為“original”, "clone"，其中"original"是默認(rèn)值，即拖動自身，而clone表示創(chuàng)建自身的一個克隆用于拖拽。helper還可以指定為函數(shù)，該函數(shù)返回一個自定義的DOM元素用于拖拽。
當(dāng)不是拖動自身的時候，需要在target上指定drop事件函數(shù)，在該函數(shù)中將特定的元素添加到target容器上，否則drop的時候什么事情都不會發(fā)生。
簡單復(fù)制的例子如下：

復(fù)制代碼代碼如下:

 
<html> 
<head></head> 
<body> 

<div id="dragsource"> 
<p>拽我!</p> 
</div> 
<div id="container" style="background-color:gray;height:300"> 
</div><!-- End container --> 
<script type="text/javascript" src="js/jquery-1.7.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> 
<script> 
$(function() { 
$( "#dragsource" ).draggable({ 
helper:"clone" 
}); 

$("#container").droppable({ 
drop:function(event,ui){ 
$(this).append($("<p style='position:absolute;left:"+ 
ui.offset.left+";top:"+ui.offset.top+"'>clone</p>")); 
} 
}); 
}) 
</script> 
</body> 
</html> 

拖動控制
到目前位置，所有的例子中都可以對source隨意拖動。在實際應(yīng)用中經(jīng)常需要對拖動行為進(jìn)行控制。下面給出幾個例子。

拖動方向
默認(rèn)拖動方向為x,y兩個方向。通過draggable的axis參數(shù)可以限制只能水平或豎直拖動。如下：

復(fù)制代碼代碼如下:

 
<html> 
<head></head> 
<body> 

<div id="dragX"> 
<p>－－</p> 
</div> 
<div id="dragY"> 
<p>|</p> 
</div> 

<script type="text/javascript" src="js/jquery-1.7.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> 
<script> 
$(function() { 
$("#dragX").draggable({axis:"x"}); 
$("#dragY").draggable({axis:"y"}); 
}); 
</script> 
</body> 
</html> 

拖動范圍
除了方向之外，還可以通過containment參數(shù)約束拖動的范圍。該參數(shù)接受Selector, Element, String, Array類型。其中String可以為parent,document,window，Array是指定一個矩形區(qū)域（regin）的四元數(shù)組：[x1,y1,x2,y2]。下面的例子分別指定了parent和regin作為范圍限制：

復(fù)制代碼代碼如下:

 
<html> 
<head></head> 
<body> 
<div id="container" style="background-color:gray;height:300"> 
<div id="draggable1" style="background-color:red;height:20;width:100"> 
<p>in parent</p> 
</div> 

<div id="draggable2" style="background-color:green;height:20;width:100"> 
<p>in regin</p> 
</div> 

<script type="text/javascript" src="js/jquery-1.7.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> 
<script> 
$(function() { 
$("#draggable1" ).draggable({containment: "parent" }); 
$("#draggable2").draggable({containment: [20,20,300,200] }); 
}); 
</script> 
</body> 
</html> 

拖動吸附
還可以在拖動的時候吸附到其他元素或網(wǎng)格。使用snap參數(shù)指定要吸附到的元素，使用grid參數(shù)指定吸附到網(wǎng)格，如下：

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<style> 
.draggable {background-color:green; width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; } 
</style> 
</head> 
<body> 
<div id="container" style="background-color:gray;height:300"> 
<div id="draggable1" class="draggable"> 
<p>吸附到其他可拖拽元素</p> 
</div> 

<div id="draggable2" class="draggable"> 
<p>吸附到容器</p> 
</div> 

<div id="draggable3" class="draggable"> 
<p>吸附到網(wǎng)格(30x30)</p> 
</div> 
</div><!--container--> 

<script type="text/javascript" src="js/jquery-1.7.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> 
<script> 
$(function() { 
$("#draggable1").draggable({ snap: true }); 
$("#draggable2").draggable({ snap: "#container"}); 
$("#draggable3").draggable({grid: [30,30]}); 
}); 
</script> 
</body> 
</html> 

拖動把手（handle）
默認(rèn)是整個元素都可以拖動，也可以指定元素的某個子元素作為拖動的handle，如：

復(fù)制代碼代碼如下:

 
<div id="draggable"> 
<p>handle</p> 
</div> 
…… 
<script> 
$("#draggable").draggable({handle:"p"}); 
</script> 

Drop限制
默認(rèn)的droppable指定元素能夠接受所有的drop，但是可以通過accept參數(shù)限定只能接受某些元素的drop。accept參數(shù)的類型為一個符合jquery selector的字符串。例如：
$(".selector").droppable({ accept: '.special' })
表示只接受具有special 樣式的元素。

增強(qiáng)用戶體驗
前面是實現(xiàn)拖拽的功能，JQueryUI還有一些參數(shù)可以增強(qiáng)用戶體驗。比如，cursor參數(shù)可以指定鼠標(biāo)指針的形狀，cursorAt指定鼠標(biāo)指針在source的相對位置，revert可以指定當(dāng)drop失敗時source“飄”回原來的位置。一個組合的例子如下：

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<style> 
.draggable {background-color:green; width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; } 
.droppable { width: 300px; height: 300px; background-color:red} 

</style> 
</head> 
<body> 
<div id="draggable2" class="draggable"> 
<p>I revert when I'm not dropped</p> 
</div> 

<div id="droppable" class="droppable"> 
<p>Drop me here</p> 
</div> 
<script type="text/javascript" src="js/jquery-1.7.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> 
<script> 
$(function() { 
$( "#draggable2" ).draggable({ revert: "invalid",cursor: "move", cursorAt: { top: 56, left: 56 } }); 
$( "#droppable" ).droppable({ 
activeClass: "ui-state-hover", 
hoverClass: "ui-state-active", 
drop: function( event, ui ) { 
$( this ) 
.addClass( "ui-state-highlight" ) 
.find( "p" ) 
.html( "Dropped!" ); 
} 
}); 
}); 
</script> 
</body> 
</html> 