EasyUI介绍和拖动例子（draggable）

1.JqueryEasyUI是什么？

基于Jquery基础之上的一堆插件.

非常容易实现页面的常见效果 tree draggable datagrid tab

2.JqueryEasyUI目录结构介绍

demo:案例

locale:国际化

plugins:各种插件的实现

src:JqueryEasyUI源码

jquery.min.js jquery文件

jquery.easyui.min.js EasyUI主文件

3.正确的引入JqueryEasyUI

学会正确的找到对应的文件

<!--引入Jquery主文件-->

<script type="text/javascript" src="../easyui/jquery.min.js"></script>

<!--引入JqueryEasyUI主文件-->

<script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>

<!--easyui的各种主题文件-->

<link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">

<!--easyui的各种图标-->

<link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">

4.拖动

1.将div中增加一个class样式: class="easyui-draggable"

<div style="width:300px;height:200px;background:pink" class="easyui-draggable"></div>

2.用js实现

<script type="">

//$("#mydd").draggable(); 错误的方式? why? 这段代码没有得到执行的机会

$(function(){

$("#mydd").draggable();

});

</script>

<div style="" id="mydd"></div>

原理: jqueryEasyUI.js 这个js文件,他会去页面上寻找判断每一个元素.看元素中的class属性是否

是以easyui开头.那么这个js文件中的程序会将这个元素将其渲染为对应的组件.

结论1:几乎每一种插件都有2种方式来实现.一种是通过纯html标签来实现 class="easyui-**"

通过html标签+js代码来实现

如果内容变化不大,不需要经常改变: html来实现

如果内容经常变化,js+html来实现

结论2: 今天学习的html标签多了data-options="k1:v1,k2:v2" ,让easyUI来识别.

通过识别data-options中的各种属性和属性值为当前组件增加各种属性.

class data-options

$("#mydd").方法名({});

方法名是有规律的:

渲染成tree：

$("#mydd").tree({k1:v1,k2:v2});

渲染成menu：

$("#mydd").menu({});

拖动：

$("#mydd").draggable({});

方法中传递的是一个对象. 对象中的属性是 以键值对的形式存在,多个属性之间用,分割.

例子（单属性）：

①以html标签完成

div id="dd" class="easyui-draggable"

data-options="handle:'#title'"

style="width:100px;height:100px;background:red">

注意：id为title的div一定要写上文本，不然页面不会展示出来到

<div id="title" style="background:#ccc;"> title</div>

</div>

②用js完成

<div id="dd" style="width:100px;height:100px;background:red">

<div id="title" style="background:#ccc;">title</div>

</div>

$(function(){

$("#dd").draggable( {handle:'#title'});

});

例子（多属性）：

①以html标签完成

<div id="dd" class="easyui-draggable"

在html的属性中，多个属性值用双引号套住，用逗号分隔

data-options=" handle:'#title',revert:true,cursor:'help'"

style="width:100px;height:100px;background:red">

<div id="title" style="background:#ccc;">title</div>

</div>

②用js完成

<div id="dd" style="width:100px;height:100px;background:red">

<div id="title" style="background:#ccc;">title</div>

</div>

$(function(){

在js中，属性是键值对，用{}括住作为一个对象传递给方法，多个属性用逗号分隔

$("#dd").draggable( {handle:'#title',revert:true,cursor:'help'});

});

结论3: 如何加事件

$("#mydd").draggable({

事件名1:function(){},

事件名2:function(){},

});

例子：

JS：

$(function(){

$("#dd").draggable({

handle:'#title',

revert:true,

cursor:'help',

onStartDrag:function(){

alert("在拖动开始触发")

}});

});

HTML：

<div id="dd" style="width:100px;height:100px;background:red">

<div id="title" style="background:#ccc;">title</div>

</div>

结论4:如何使用方法

//使用disable方法，使div不能拖动

$("#mydd").draggable("disable");