第四章:Droppable(放置)组件
学习要点:
- 加载方式
- 属性列表
- 事件列表
- 方法列表
一、加载方式:
1.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" class="easyui-droppable" data-options="accept:'#box,#pox'" 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>
2.JS调用
<!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>
$(function(){
$('#box').droppable({
accept:'#box,#pox',
});
});
二、属性列表:
Drooppable属性 | ||
---|---|---|
属性名 | 值 | 说明 |
accept | selector | 默认为null,确定哪些元素被接受 |
disabled | boolean | 默认为false,如果为true,则禁止放置 |
<!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>
$(function(){
$('#dd').droppable({
accept:'#box,#pox',
//disabled:true,
});
$('#box').draggable({
});
});
三、事件列表
Droppable事件 | ||
---|---|---|
事件名 | 传参 | 说明 |
onDragEnter | e,source | 在被拖拽元素到放置区内的时候触发 |
onDragOver | e,source | 在被拖拽元素经过放置区的时候触发 |
onDragLeave | e,source | 在被拖拽元素离开放置区的时候触发 |
onDrop | e,source | 在被拖拽元素放入到放置区的时候触发 |
<!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>
$(function(){
$('#dd').droppable({
accept:'#box',
onDragEnter:function(e,source){
console.log(source),
}
});
$('#box').draggable({
});
});
$(function(){
$('#dd').droppable({
accept:'#box',
//disabled:true,
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('leave');
},
onDrop:function(e,source){
//console.log(source),
$(this).css('background','maroon');
alert('drop');
},
//onDragEnter只触发一次,而Over会在不停的拖动中不停触发。
//onDrop是放入到放置区,松开鼠标左键,丢下的操作。
});
$('#box').draggable({
});
});
四、方法列表
Droppable方法 | ||
---|---|---|
事件名 | 传参 | 说明 |
options | none | 返回属性对象 |
enable | none | 启用放置功能 |
disable | none | 禁止放置功能 |
PS:我们可以使用$.fn.droppable.defaults 重写默认值对象。
$(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('leave');
},
onDrop:function(e,source){
//console.log(source),
$(this).css('background','maroon');
alert('drop');
},
//onDragEnter只触发一次,而Over会在不停的拖动中不停触发。
//onDrop是放入到放置区,松开鼠标左键,丢下的操作。
});
console.log($('#dd').droppable('options'));
$('#dd').droppable('disable');
$('#dd').droppable('enable');
$('#box').draggable({
});
});
作者:Roger_CoderLife
链接:https://blog.csdn.net/Roger_CoderLife/article/details/102570239
本文根据网易云课堂JQuery EasyUI视频教程翻译成文档,转载请注明原文出处,欢迎转载!