您的位置：首页 > Web前端 > JQuery

JQuery EasyUI---Droppable( 放置)

2016-02-25 11:57 766 查看

学习要点：

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 重写默认值对象。  重写对象比较推荐放在代码的前面

本节所有代码如下所示


<!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>
<div id="box" style="width:100px;height:100px;background:#ccc;">
<span id="pox">内容部分</span>
</div>
</body>
</html>


JS代码

 $(function () {
$.fn.droppable.defaults.disabled = true;
$('#dd').droppable({
accept : '#box',
disabled : false,
onDragEnter : function (e, source) {
//console.log(source);
$(this).css('background', 'blue');
//alert('enter');
},
onDragOver : function (e, source) {
//console.log(source);
$(this).css('background', 'orange');
//alert('over');
},
onDragLeave : function (e, source) {
//console.log(source);
$(this).css('background', 'green');
//alert('over');
},
onDrop : function (e, source) {
//console.log(source);
$(this).css('background', 'maroon');
//alert('over');
},
//onDragEnter只触发一次，而Over会在不停的拖动中不停触发
//onDrop是放入到放置区，松开鼠标左键，丢下的操作
});

//console.log($('#dd').droppable('options'));

//$('#dd').droppable('disable');
//$('#dd').droppable('enable');
$('#box').draggable({

});

});


完毕！！！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航