JQuery UI的拖拽功能

時間 2019-11-24

標籤 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() { $( "#dragsource" ).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() { $( "#dragsource" ).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="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>

複製拖動

前面的例子都是移動元素，另外一種常見的場景是複製拖動。好比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="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隨意拖動。在實際應用中常常須要對拖動行爲進行控制。下面給出幾個例子。動畫

拖動方向

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

<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參數約束拖動的範圍。該參數接受Selector, Element, String, Array類型。其中String能夠爲parent,document,window，Array是指定一個矩形區域（regin）的四元數組：[x1,y1,x2,y2]。下面的例子分別指定了parent和regin做爲範圍限制：

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

拖動吸附

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

<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>吸附到網格(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）

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

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

Drop限制

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

加強用戶體驗

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

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

相關標籤/搜索

每日一句

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