JQuery UI的拖拽功能實現方法小結

2024-05-06 14:22:20

字體：大中小

來源：轉載

供稿：網友

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

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

最簡單的例子
最簡單的拖拽是不改變元素所在的容器，而只改變其位置。例子如下：
代碼如下:
<html>
<head></head>
<body>
<div id="container">
<div id="dragsource">
<p>拽我!</p>
</div>
</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();
})
</script>
</body>
</html>

拖動到另一個容器
更常見的場景是將元素拖動到另一個容器中。這就需要在drop目標(target)容器上應用droppable函數。讓我們在上一個例子的基礎上，增加一個div作為容器，并應用droppable函數：
代碼如下:
<html>
<head></head>
<body>
<div id="container">
<div id="dragsource">
<p>拽我!</p>
</div>
</div>

<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>

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

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

　　create: 在source上應用draggable函數時觸發
　　start：開始拖動時觸發
　　drap：拖動過程中觸發
　　stop：釋放時觸發