bb电子

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

3.3　放置（Droppable）

放置組件提供一個可放置拖放元素的區域，放置組件可以授權拖放的元素，并且當拖放的元素放置完畢后獲取拖放元素的內容。

3.3.1　放置的使用方法

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

1. 創建放置區域

使用標記創建放置區域的方法如下：

01  <div class="easyui-droppable" data-options="accept:'#d1'"
style="width:100px;height:100px;">
02  </div>

使用JavaScript創建放置區域的方法如下：

01  <div id="dd" style="width:100px;height:100px;"></div>
02  $('#dd').droppable({
03      accept:'#d1,#d3'
04   });

2. 放置組件屬性

放置組件常用屬性說明見表3.5。

表3.5　放置組件屬性說明

3. 放置組件事件

放置組件常用事件說明見表3.6。

表3.6　放置組件事件說明

其中參數e為拖動過程中的事件對象，參數source為拖動元素的DOM對象。

4. 放置組件方法

放置組件常用方法說明如表3.7。

表3.7　放置組件常用方法說明

3.3.2　授權拖放的組件

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

本節將向讀者演示如何結合放置組件使用拖放，我們先創建三個可拖放的組件，并且授權其中兩個可被拖放到放置區域，部分代碼如下：

01  <style>
02      #border{
03           border:1px solid;
04           width:500px;
05                height:300px;
06                margin-left:200px;
07                float:left;
08            }
09            #d1,#d2,#d3{
10                margin-bottom:10px
11            }
12       </style>
13       <body>
14            <div style="float:left;width:60px;margin-right:20px;">
15                <div id="d1" style="width:60px;height:16px">
16                     <div id="element1" style="background:#0f0;width:60px;height:16px">
17  拖放元素1</div>
18                </div>
19                <div id="d2" style="width:60px;height:16px">
20                     <div id="element2" style="background:#0f0;width:60px;height:16px">
21  拖放元素2</div>
22                </div>
23                <div id="d3" style="width:60px;height:16px">
24                     <div id="element3" style="background:#f00;width:60px;height:16px">
25  拖放元素3</div>
26                </div>
27            </div>
28            <div id=”border”></div>
29       </body>
30       <script>
31            $(function(){
32              $(‘#d1’).draggable({
33                     handle:’#element1’,
34                     revert:true
35              });
36              $(‘#d2’).draggable({
37                     handle:’#element2’,
38                     revert:true
39              });
40              $(‘#d3’).draggable({
41                     handle:’#element3’,
42                     revert:true
43              });
44              $(‘#border’).droppable({
45               accept:’#d1,#d2’,
46                onDrop:function(e,source){
47                $(this).append($(source).html());
48            }
49         });
50       });
51  </script>

上述代碼中，我們授權拖放元素1和拖放元素2可以被拖放到放置區域中，拖放元素3不可被拖放到放置區域中，設置拖放元素屬性revert為true，元素拖放完畢后會回到初始位置。最終運行效果如圖3.7所示。

圖3.7　授權拖放組件

提示

拖放元素3未被授權但仍然可拖放至放置區，只是當拖放元素3經過放置組件時，放置組件無法獲取該拖放元素DOM。

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

jQuery EasyUI從零開始學

3.3 放置（Droppable）

3.3.1 放置的使用方法

3.3.2 授權拖放的組件

3.3　放置（Droppable）

3.3.1　放置的使用方法

3.3.2　授權拖放的組件