学习要点：
1.加载方式
2.属性列表
3.事件列表
4.方法列表
本节重点了解 EasyUI 中 Droppable(放置)组件的使用方法，所谓放置，就将一个物体入某一个物体内触发各种效果，这个组件不依赖于其他组件
一．加载方式
加载方式的其它组件是一样的，都可以使用Class加载和JS加载
class加载方式
<!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script> <script type="text/javascript" src="js/index.js"></script> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" /> </head> <body> <div id="dd" style="width:600px;height:400px;background:black"></div> </body> </html>
JS加载
$(‘#box‘).draggable({
});
参数是对象类型
二． 属性列表
Draggable 组件共有二个属性，分别是：accept和disabled
//属性设置
$(‘#dd‘).droppable({
accept : ‘#box‘,//selector 选择器的名称，可以ID选择器，也可以是class选择器 默认为 null，确定哪些元素被接收
disabled : true,//boolean 布尔值 默认为 false，如果为 true，则禁止放置
});
三． 事件列表
Droppable组件一共有四个事件，分别是：onDragEnter、onDragOver、onDragLeave、onDrop。
PS：source 参数获取 DOM 元素。
$(‘#dd‘).droppable({
accept : ‘#box‘,
onDragOver : function (e, source) { //参数是e,source 被拖拽元素经过放置区的时候触发
$(this).css(‘background‘, ‘blue‘);
},
onDragEnter : function (e, source) {//参数是e,source 在被拖拽元素到放置区内的时候触发
$(this).css(‘background‘, ‘orange‘);
},
onDragLeave : function (e, source) {//e,source 在被拖拽元素离开放置区的时候触发
$(this).css(‘background‘, ‘green‘);
},
onDrop : function (e, source) {//e,source 在被拖拽元素放入到放置区的时候触发
$(this).css(‘background‘, ‘maroon‘);
},
});
四． 方法列表
Droggable 方法
options方法，值是none；说明 返回属性对象
enable 方法，值是none；说明 启用放置功能
disable 方法，值是none；说明 禁用放置功能
//返回属性对象 console.log($(‘#box‘).droggable(‘options‘)); //禁止放置 $(‘#box‘).draggable(‘disable‘); //启用放置 $(‘#box‘).draggable(‘enable‘); $.fn.droppable.defaults.disabled = true;
PS：我们可以使用$.fn.droppable.defaults 重写默认值对象。 重写对象比较推荐放在代码的前面 本节所有代码如下所示
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>jQuery Easy UI</title> 5 <meta charset="UTF-8" /> 6 <script type="text/javascript" src="easyui/jquery.min.js"></script> 7 <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> 8 <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script> 9 <script type="text/javascript" src="js/index.js"></script> 10 <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" /> 11 <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" /> 12 </head> 13 <body> 14 <div id="dd" style="width:600px;height:400px;background:black"></div> 15 <div id="box" style="width:100px;height:100px;background:#ccc;"> 16 <span id="pox">内容部分</span> 17 </div> 18 </body> 19 </html>
JS代码
1 $(function () {
2 $.fn.droppable.defaults.disabled = true;
3 $(‘#dd‘).droppable({
4 accept : ‘#box‘,
5 disabled : false,
6 onDragEnter : function (e, source) {
7 //console.log(source);
8 $(this).css(‘background‘, ‘blue‘);
9 //alert(‘enter‘);
10 },
11 onDragOver : function (e, source) {
12 //console.log(source);
13 $(this).css(‘background‘, ‘orange‘);
14 //alert(‘over‘);
15 },
16 onDragLeave : function (e, source) {
17 //console.log(source);
18 $(this).css(‘background‘, ‘green‘);
19 //alert(‘over‘);
20 },
21 onDrop : function (e, source) {
22 //console.log(source);
23 $(this).css(‘background‘, ‘maroon‘);
24 //alert(‘over‘);
25 },
26 //onDragEnter只触发一次，而Over会在不停的拖动中不停触发
27 //onDrop是放入到放置区，松开鼠标左键，丢下的操作
28 });
29
30 //console.log($(‘#dd‘).droppable(‘options‘));
31
32 //$(‘#dd‘).droppable(‘disable‘);
33 //$(‘#dd‘).droppable(‘enable‘);
34 $(‘#box‘).draggable({
35
36 });
37
38 });
完毕！！！
时间： 2024-11-05 16:03:39