Easy UI常用于企业级开发的UI和后台开发的UI，比较重。
1.Draggable(拖动)组件 不依赖其他组件
1.1加载方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="JS/Demo.JS"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div id="box" style="width :400px;height: 200px;background:orange;" >
内容部分
</div>
</body>
</html>
div box
$(function(){
$('#box').draggable();
});
1.2属性列表
$(function(){
$('#box').draggable({
revert:true,//设置为true,则拖动停止时返回起始位置
cursor:'move',//拖动时CSS指针样式 move指针为移动的样式 text为文本样式
disabled：true，//false无法拖动
edge:50,//拖动容器宽度
axis:'v',//v垂直拖动，h水平拖动
proxy:'clone',//克隆一个元素代替拖动
proxy:function(source){//拖动时看不见元素
var p=$('<div style="width:400px;height:200px;border:5px;dashed:#ccc">')
p.appendTo('body')
return p;
}
});
});
属性列表
1.3事件列表
$(function(){
$('#box').draggable({
onBeforeDrag:function(e)
{
alert("拖动前触发!");
}
onStartDrag:function(e)
{
alert("拖动开始触发!");
}
onDrag:function(e)
{
alert("拖动过程触发!");
}
onStopDrag:function(e)
{
alert("拖动过程触发!");
}
});
});
事件列表
1.4方法列表
$('#box').draggable('disable');
$('#box').draggable('enable');
$('#box').draggable('options');
$('#box').draggable('proxy');//运行在拖到事件中可以看
方法列表
2.Droppable（放置组件）
$(function(){
$('#dd').droppable({//放置的组件
accept:'#box',//接受的组件
// disabled:true,//其拖动无效 一般不写
onDragEnter:function(e,source)
{
$(this).css('background','blue');
},
onDragOver:function(e,source)//会不停的触发 Enter只会触发一次
{
$(this).css('background','orange');
},
onDrop:function(e,source)//放入到位置区，松开鼠标左键，丢下的操作
{
$(this).css('background','white');
},
});
$('#box').draggable({});
});
Droppable
3.Resizable(调整大小)组件