第三章：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視頻教程翻譯成文檔，轉載請註明原文出處，歡迎轉載！
