第三章:Draggable(拖动)组件
学习要点:
- 加载方式
- 属性列表
- 事件列表
- 方法列表
一、加载方式:
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="box" class="easyui-draggable" style="width:400px;height:200px;background:red;">
内容部分
</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="box" style="width:400px;height:200px;background:red;">
内容部分
</div>
</body>
</html>
$(function(){
$('#box').draggable();
});
二、属性列表:
Draggable属性 | ||
---|---|---|
属性名 | 值 | 说明 |
Proxy | null/string、function | 当使用'clone',则克隆一个替代元素拖动,如果指定一个函数,则自定义替代元素。 |
revert | false/boolean | 设置为true,则拖动停止时返回起始位置。 |
cursor | move/string | 拖动时的CSS指针样式。 |
deltaX | null/number | 被拖动的元素对应于当前光标位置X。 |
deltaY | null/number | 被拖动的元素对应于当前光标位置Y。 |
handle | null/selector | 开始拖动的句柄。 |
disabled | false/boolean | 设置为true,则停止拖动。 |
edge | 0/number | 可以在其中拖动的容器的宽度。 |
axis | null/string | 设置拖动为垂直‘v’,还是水平‘h’。 |
<!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="box" style="width:400px;height:200px;background:red;">
<span id="pox">内容部分</span>
</div>
</body>
</html>
$(function(){
$('#box').draggable({
//revert:ture,
//cursor:'text',
//handle:'#pox',
//disabled:ture,
//edge:180,
//exis:'v',
//proxy:'clone',
//delaX:50,
//delaY:50,
proxy:function(source){
var p = $('<div style="width:400px;height:200px;border:1px dashed #ccc">');
p.html($(source).html()).appendTo('body');
return p;
},
});
});
三、事件列表:
Draggable事件 | ||
---|---|---|
事件名 | 传参 | 说明 |
onBeforeDrag | e | 拖动之前触发,返回false将取消拖动。 |
onStartDrag | e | 拖动开始时触发。 |
onDrag | e | 拖动过程中触发,不能拖动时返回false。 |
onStopDrag | e | 拖动停止时触发。 |
<!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="box" style="width:400px;height:200px;background:red;">
<span id="pox">内容部分</span>
</div>
</body>
</html>
$(function(){
$('#box').draggable({
// onBeforeDrag:function(e){
// alert('拖动前触发!');
// };
// onBeforeDrag:function(e){
// return false;
// };
// onStartDrag:function(e){
// alert('拖动开始触发!');
// };
// onDrag:function(e){
// alert('拖动过程中触发!');
// };
onStopDrag:function(e){
alert('拖动结束时触发!');
};
});
});
四、方法列表:
Draggable方法 | ||
---|---|---|
事件名 | 传参 | 说明 |
options | none | 返回属性对象。 |
proxy | none | 如果代理属性被设置则返回该拖动代理元素。 |
enable | none | 允许拖动。 |
disable | none | 禁止拖动。 |
<!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="box" style="width:400px;height:200px;background:red;">
<span id="pox">内容部分</span>
</div>
</body>
</html>
$(function(){
$('#box').draggable({
proxy:'clone',
onStartDrag:function(e){
console.log($('#box').draggable('proxy'));
};
});
//$('#box').draggable('disable');
//$('#box').draggable('enable');
//console.log($('#box').draggable('options'));
});
PS:我们可以使用$.fn.draggable.defaults重写默认值对象。
$(function(){
$.fn.draggable.defaults.cursor = 'text';
$('#box').draggable({
});
});
作者:Roger_CoderLife
链接:https://blog.csdn.net/Roger_CoderLife/article/details/102570053
本文根据网易云课堂JQuery EasyUI视频教程翻译成文档,转载请注明原文出处,欢迎转载!