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>
$(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({}); });
3.Resizable(调整大小)组件
原文：https://www.cnblogs.com/cdjbolg/p/11967577.html
