上QQ阅读APP看书，第一时间看更新
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。