JQuery UI的拖拽功能

時間 2019-12-09

標籤 jquery 功能欄目 JQuery 简体版

原文原文鏈接

JQuery UI是JQuery官方支持的WebUI 代碼庫，包含底層交互、動畫、特效等API，而且封裝了一些Web小部件（Widget）。同時，JQuery UI繼承了jquery的插件支持，有大量的第三方插件能夠豐富JQuery UI的功能。
JQuery UI提供的API極大簡化了拖拽功能的開發。只須要分別在拖拽源(source)和目標(target)上調用draggable和droppable兩個函數便可。javascript

拖拽原理

首先要明確幾個概念。
　　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

最簡單的例子

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

<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"" ).draggable(); }) </script> </body> </html>

拖動到另外一個容器

更常見的場景是將元素拖動到另外一個容器中。這就須要在drop目標(target)容器上應用droppable函數。讓咱們在上一個例子的基礎上，增長一個div做爲容器，並應用droppable函數：java

<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"" ).draggable(); $( #droppable ).droppable(); }) </script> </body> </html>

事件監聽和回顯（Feedback）

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

對於源（source)，能夠監聽的事件包括：jquery

　　create: 在source上應用draggable函數時觸發
　　start：開始拖動時觸發
　　drap：拖動過程當中觸發
　　stop：釋放時觸發
對於目標（target）,能夠監聽的事件包括：
　　create: 在target上應用droppable函數時觸發
　　activate：若是當前拖動的source能夠drop到本target，則觸發
　　deactivate：若是能夠drop到本target的拖拽中止，則觸發
　　over：source被拖動到target上面
　　out：source被拖動離開target
　　drop：source被釋放到target
事件處理函數都是經過draggable和droppable函數的參數傳遞，在這些事件處理函數中就能夠進行Feedback。看一下實際的例子：數組

<html> <head> </head> <body> <div id="dragsource"> <p id="targetMsg">:-|</p> </div> <div id="droppable" style="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""functionthis""""); }, stop:(event,ui){ $().find(p).html(:-|); } }); $( #droppable ).droppable({ activate: (event,ui) { $().find(p).html( Drop here ! ); }, over: (event,ui) { $(  ).find( p ).html( Oh, Yeah! ); }, out: (event,ui) { $(  ).find( p ).html( Don't leave me! ); }, drop: ( event, ui ) { $(  ).find( p ).html( I've got it! ); } }); }) </script> </body> </html>

複製拖動

前面的例子都是移動元素，另外一種常見的場景是複製拖動。好比visio中的從畫板中拖動元素到畫布。這是經過draggable函數的helper參數設定的。app

helper能夠指定爲「original」, "clone"，其中"original"是默認值，即拖動自身，而clone表示建立自身的一個克隆用於拖拽。helper還能夠指定爲函數，該函數返回一個自定義的DOM元素用於拖拽。
當不是拖動自身的時候，須要在target上指定drop事件函數，在該函數中將特定的元素添加到target容器上，不然drop的時候什麼事情都不會發生。
簡單複製的例子以下：框架

<html> <head></head> <body> <div id="dragsource"> <p>拽我!</p> </div> <div id="container" style="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"""" }); $(#container).droppable({ drop:(event,ui){ $().append($(<p style='position:absolute;left:++;top:++'>clone</p>)); } }); }) </script> </body> </html>

拖動控制

到目前位置，全部的例子中均可以對source隨意拖動。在實際應用中常常須要對拖動行爲進行控制。下面給出幾個例子。ssh

拖動方向

默認拖動方向爲x,y兩個方向。經過draggable的axis參數能夠限制只能水平或豎直拖動。以下：函數

<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""""}); $(#dragY).draggable({axis:y}); }); </script> </body> </html>

拖動範圍

除了方向以外，還能夠經過containment參數約束拖動的範圍。該參數接受Selector, Element, String, Array類型。其中String能夠爲parent,document,window，Array是指定一個矩形區域（regin）的四元數組： [x1,y1,x2,y2]。下面的例子分別指定了parent和regin做爲範圍限制：

<html> <head></head> <body> <div id="container" style="height:300"> <div id="draggable1" style="height:20;width:100"> <p>in parent</p> </div> <div id="draggable2" style="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"""" }); $(#draggable2).draggable({containment: [,,,] }); }); </script> </body> </html>

拖動吸附

還能夠在拖動的時候吸附到其餘元素或網格。使用snap參數指定要吸附到的元素，使用grid參數指定吸附到網格，以下：

<html> <head> <style>{:;:;:;:;:;:;:;  </style> </head> <body> <div id="container" style="height:300"> <div id="draggable1" class="draggable"> <p>吸附到其餘可拖拽元素</p> </div> <div id="draggable2" class="draggable"> <p>吸附到容器</p> </div> <div id="draggable3" class="draggable"> <p>吸附到網格(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""true }); $(#draggable2).draggable({ snap: #container}); $(#draggable3).draggable({grid: [,]}); }); </script> </body> </html>

拖動把手（handle）

默認是整個元素均可以拖動，也能夠指定元素的某個子元素做爲拖動的handle，如：

<div id="draggable"> <p>handle</p> </div> …… <script>""""}); </script>

Drop限制

默認的droppable指定元素可以接受全部的drop，可是能夠經過accept參數限定只能接受某些元素的drop。accept參數的類型爲一個符合jquery selector的字符串。例如：
$(".selector").droppable({ accept: '.special' })
表示只接受具備special 樣式的元素。

加強用戶體驗

前面是實現拖拽的功能，JQueryUI還有一些參數能夠加強用戶體驗。好比，cursor參數能夠指定鼠標指針的形狀，cursorAt指定鼠標指針在source的相對位置，revert能夠指定當drop失敗時source「飄」回原來的位置。一個組合的例子以下：

<html> <head> <style>{:;:;:;:;:;:;:;  .droppable  width 300px height 300px background-colorred </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""""""5656 } }); $( #droppable ).droppable({ activeClass: ui-state-hover, hoverClass: ui-state-active, drop: ( event, ui ) { $(  ) .addClass( ui-state-highlight ) .find( p ) .html( Dropped! ); } }); }); </script> </body> </html>----------------------------------------------------------------------------------------------------------------------Default： $(」#draggable」).draggable(); ============================================================ constrain-movement(限制範圍移動)： $(」#draggable」).draggable({ axis: ‘y' }); //限制y軸 $(」#draggable2″).draggable({ axis: ‘x' }); //限制x軸 $(」#draggable3″).draggable({ containment: ‘#containment-wrapper', scroll: false }); //不出現滾動條 $(」#draggable4″).draggable({ containment: ‘#demo-frame' }); $(」#draggable5″).draggable({ containment: ‘parent' }); //限制在父系框架中 ============================================================ delay-start(延時移動)： $(」#draggable」).draggable({ distance: 20 }); //移動20像素開始拖動 $(」#draggable2″).draggable({ delay: 1000 });//延遲1秒後開始拖動 ============================================================ snap-to (吸附移動)： $(」#draggable」).draggable({ snap: true }); //默認，任何方式吸附 $(」#draggable2″).draggable({ snap: ‘.ui-widget-header' }); //以某元素的內外徑吸附 $(」#draggable3″).draggable({ snap: ‘.ui-widget-header', snapMode: ‘outer' }); //以某元素外徑吸附,吸附方式:本上吸其下，本下吸其上. 內徑吸附：inner, 吸附方式:相反 $(」#draggable4″).draggable({ grid: [20,20] });//以必定距離移動 $(」#draggable5″).draggable({ grid: [80, 80] }); ============================================================ scroll： $(」#draggable」).draggable({ scroll: true }); $(」#draggable2″).draggable({ scroll: true, scrollSensitivity: 100 }); //滾動條敏感度 $(」#draggable3″).draggable({ scroll: true, scrollSpeed: 100 }); //滾動速度 ============================================================ revert position(恢復到原始位置)： $(」#draggable」).draggable({ revert: true }); //revert:true 設置爲恢復到位置 $(」#draggable2″).draggable({ revert: true, helper: ‘clone' }); //helper:'clone' 複製拖動 ============================================================ visualfeedback (視覺效果)： $(」#draggable」).draggable({ helper: ‘original' }); //設置不復制(初始化設置) $(」#draggable2″).draggable({ opacity: 0.7, helper: ‘clone' }); //opacity設置透明度,並克隆元素 $(」#draggable3″).draggable({ cursor: ‘move', //設置鼠標圖形 cursorAt: { top: -12, left: -20 }, //位置定位座標設置 helper: function(event) { return $(' I\'m a custom helper '); } //新建提示元素,上面設置其以鼠標定位位置值 }); $(」#set div」).draggable({ stack: { group: ‘#set div', min: -1 } });//羣組設置拖動,而且最後添加的元素疊加到該羣組的最上面.適合作許願板效果。 ============================================================ Drag handle (拖動點設置)： $(」#draggable」).draggable({ handle: ‘p' }); //handle設置實現拖動位置 $(」#draggable2″).draggable({ cancel: 「p.ui-widget-header」 }); //cancel設置限制拖動位置 ============================================================ Cursor style (鼠標樣式)： $(」#draggable」).draggable({ cursorAt: { cursor: ‘move', top: 56, left: 56 } }); //cursor設置鼠標樣式, top、left、right、bottom設置元素相對鼠標的定位點 $(」#draggable2″).draggable({ cursorAt: { cursor: ‘crosshair', top: -5, left: -5 } }); $(」#draggable3″).draggable({ cursorAt: { bottom: 0 } }); =========================================================== Cursor style (鼠標樣式)： $(」#draggable」).draggable({ cursorAt: { cursor: ‘move', top: 56, left: 56 } }); //cursor設置鼠標樣式, top、left、right、bottom設置元素相對鼠標的定位點 ============================================================ Draggable+sortable： $(」#sortable」).sortable({ revert: true }); $(」#draggable」).draggable({ connectToSortable: ‘#sortable', //設置拖動加入到其餘列表中 helper: ‘clone', revert: ‘invalid' });

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。