捕鱼机如何知道真假鱼

書名： jQuery EasyUI從零開始學
作者名：施堯
本章字數： 1373字
更新時間： 2019-12-06 14:09:03

3.2　拖放（Draggable）

拖放組件用于實現指定元素的拖放，它能使元素隨著鼠標而移動。本節將介紹拖放組件的使用方法，向讀者介紹如何將拖放元素限制在指定的容器中以及如何讓拖放元素在網格中快速移動。

3.2.1　拖放的使用方法

拖放的默認配置定義在$.fn.draggable.defaults中。

1. 創建拖放

使用標記創建拖放的方法如下：

01      <div id="dd" class="easyui-draggable" data-options="handle:'#title'"
style="width:100px">
02          <div id="title" style="background:#ccc;">拖放元素</div>
03       </div>

通過JavaScript創建拖放的方法如下：

01  <div id="dd" style="width:100px ">
02      <div id="title" style="background:#ccc;"> 拖放元素</div>
03  </div>
04  $('#dd').draggable({
05      handle:'#title'
06   });

2. 拖放屬性

拖放組件常用屬性說明見表3.2。

表3.2　拖放常用屬性說明

handle指定的是開始拖動時可被選中的元素，例如我們在一個可被拖動的容器內定義兩個元素e1和e2:

01  <div class="drag-container">
02       <p id="e1">元素1</p>
03       <p id="e2">元素2</p>
04  </div>

當handle屬性設置為元素1的選擇器時，只有當鼠標放到元素1上才可以拖動該容器。如果不設置handle的值，那么將鼠標放到容器的任意位置都可拖動該容器。

edge屬性設置的是拖動元素內不可被拖動的區域寬度，默認設置為0意味著整個元素都可被拖動，詳細解釋如圖3.3所示。

圖3.3　edge屬性詳解

proxy屬性其實就是設置元素拖動過程中的展示值，讀者可以理解為拖動元素有兩個值，第一個為其存儲值（初始化時顯示的值），第二個為其展示值（拖動時顯示的值）。如果設置proxy參數為null，此時展示值即為存儲值，當設置proxy參數為clone時展示值為存儲值的一個克隆元素，開發者也可以使用函數自定義拖動過程中的展示值。例如下面我們設置元素拖動時在其外部顯示一個邊框，部分代碼如下:

01       <body>
02           <div id="dd" style="width:100px;height:100px ">
03                <div id="title"> 拖放元素</div>
04           </div>
05       </body>
06       <script>
07           $(function(){
08             $('#dd').draggable({
09                  proxy: function(source){
10                         var p = $('<div style="border:1px solid
#ccc;width:100px"></div>');
11                         p.html($(source).html()).appendTo('body');
12                         return  p;
13                     },
14                     handle:'#title',
15             });
16           });
17       </script>

最終顯示結果如圖3.4所示。

圖3.4　proxy屬性演示

3. 拖放事件

拖放常用事件說明見表3.3。

表3.3　拖放常用事件說明

拖放事件的參數e為一個事件對象，拖放事件觸發的時間順序以及詳細講解如圖3.5所示。

圖3.5　拖放事件流程圖

4. 拖放方法

拖放常用方法說明見表3.4。

表3.4　拖放常用方法說明

3.2.2　容器內拖放

【本節詳細代碼參見隨書源碼：\源碼\easyui\example\c3\ innerDraggable.html】

通過上一節的學習，我們已經可以創建一個簡單的拖放組件，并且我們通過鼠標可以將其拖放至頁面的任意位置，本節將介紹如何將拖放組件的拖放區域限制在指定的容器中。實現該功能首先需要確定指定容器的邊界，當將元素拖動到容器邊界外時，需要重新設置元素的位置。部分代碼如下：

01       <style>
02            #border{
03                border:1px solid;
04                width:500px;
05                height:300px;
06            }
07       </style>
08       <body>
09            <div id="border">
10                <div id="dd" style="width:60px;height:16px">
11                   <div id="title"
style="background:#ccc;width:60px;height:16px">拖放元素
12  </div>
13                </div>
14            </div>
15       </body>
16       <script>
17            $(function(){
18              $('#dd').draggable({
19                  proxy: function(source){
20                          var p = $('<div style="border:1px solid;"></div>');
21                          p.html($(source).html()).appendTo('body');
22                          return p;
23                     },
24                     handle:'#title',
25                     onDrag:function(e){
26                          var d = e.data;//獲取事件對象的data屬性
27                          var c = $(d.target);//獲取拖動元素的jquery對象
28                          var p = $(d.parent);//獲取拖動元素的父元素的jquery對象
29                          //獲取父元素的邊界
30                      var p_left   = p.offset().left;
31                      var p_top    = p.offset().top;
32                      var p_right  = p.width()+p.offset().left;
33                      var p_bottom = p.height()+p.offset().top;
34                      //拖動元素的位置
35                      var left      = d.left;
36                      var top      = d.top;
37                      //調整元素位置
38                      if (left < p_left){
39                           left = p_left
40                      }
41                      if (top < p_top){
42                           top = p_top
43                      }
44                      if (left + c.outerWidth() > p_right){
45                           left = p_right - c.outerWidth();
46                      }
47                 if (top + c.outerHeight() > p_bottom){
48                      top = p_bottom - c.outerHeight();
49                 }
50                 d.left = left;
51                 d.top  = top;
52              }
53         });
54       });
55  </script>

此時元素只能在其父元素容器范圍內拖動，最終運行結果如圖3.6所示。

圖3.6　指定容器內拖放

3.2.3　快速拖放

快速拖放也稱為snap拖放，之前的章節介紹的拖放可以隨著用戶的鼠標實時移動，但是在一些列表以及網格中，我們更希望元素可以在每一行或每一格之間移動，而不是隨著鼠標實時移動，也就是說只有當鼠標移動超過指定的距離時才會產生拖動行為?？焖偻蟿拥氖褂梅浅：唵?，例如設計一個在20×20的網格中快速拖放的元素，部分代碼如下。

01  $('#dd').draggable({
02                  proxy: function(source){
03                         var p = $('<div style="border:1px solid;"></div>');
04                         p.html($(source).html()).appendTo('body');
05                         return p;
06                     },
07                     onDrag:function(e){
08                         var d = e.data;
09                         d.left = convert (d.left);
10                         d.top = convert (d.top);
11                         function convert (v){
12                              var r = parseInt(v/20)*20;//當前位置轉換為20的倍數
13                              /*當前位置在20倍數的基礎上移動距離是否超過10px
14                              如果超過的話就直接移動20px，否則保持當前位置*/
15                              if (Math.abs(v % 20) > 10){
16                                  r += v > 0 ? 20 : -20;
17                              }
18                              return r;
19                         }
20                     }
21             });

官术网_书友最值得收藏!

jQuery EasyUI從零開始學

3.2 拖放（Draggable）

3.2.1 拖放的使用方法

3.2.2 容器內拖放

3.2.3 快速拖放

3.2　拖放（Draggable）

3.2.1　拖放的使用方法

3.2.2　容器內拖放

3.2.3　快速拖放