easyUI拖动：draggable()方法运用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/default/easyui.css">
<!--<link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/black/easyui.css">-->
<link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/icon.css">
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>面板嵌套</h2>
<p>面板可以放置在容器中，可以包含其他组件。west、east、north、south表示方位；region：地区</p>
<div style="margin:20px 0 10px 0;"></div>
<div class="easyui-panel" title="Nested Panel" style="width:700px;height:200px;padding:10px;">
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'west',split:true" style="width:100px;padding:10px">
西部 Content
</div>
<div data-options="region:'east'" style="width:100px;padding:10px">
东部 Content
</div>
<div data-options="region:'center'" style="padding:10px">
中间 Content
</div>
<div data-options="region:'north'" style="padding:10px">
北部 Content
</div>
<div data-options="region:'south'" style="padding:10px">
南部 Content
</div>
</div>
</div> <br><br><br><br>
<div id="box1" class="box1" style="width: 100px; height: 100px; background-color: #f00">第一个盒子</div>
<div id="box2" class="box2" style="width: 100px; height: 100px; background-color: #f0f">第二个盒子</div>
<div id="box3" class="box3" style="width: 100px; height: 100px; background-color: yellow">第三个盒子</div> <script>
$(document).ready(function(){
$('#box1').draggable();//第一个盒子可以随意拖动，且原来的位置被之后的盒子取代
$('#box2').draggable({
//第二个盒子也可以随意拖动，创建一个克隆（clone）了原来元素的代理（proxy）让其可以拖动。
//鼠标放开的瞬间原来的盒子才会消失，否则是一种复制出来的盒子在动的现象。
proxy:'clone'
}); //通过创建自定义代理（proxy）让其可以拖动。且拖动时显示自定义的文本内容
$('#box3').draggable({
proxy:function(source){
var p = $('<div class="proxy">hello 点击拖动会显示我的文本内容</div>');
p.appendTo('body');
return p;
}
});
})
</script> </body>
</html>
easyUI拖动：draggable()方法运用的更多相关文章
- 第一百九十三节，jQuery EasyUI，Draggable(拖动)组件
Draggable(拖动)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Draggable(拖动)组件的使用方法,这个组件不依赖于其 他组 ...
- 把JSON数据载入到页面表单的两种思路（对easyui自带方法进行改进）
#把JSON数据载入到页面表单的两种思路(对easyui自带方法进行改进) ##背景 项目中经常需要把JSON数据填充到页面表单,一开始我使用easyui自带的form load方法,觉得效率很低,经 ...
- easyui datebox定位到某一个日期， easyui datebox直接定位到具体的日期， easyui datebox MoveTo方法使用
easyui datebox定位到某一个日期, easyui datebox直接定位到具体的日期, easyui datebox MoveTo方法使用 >>>>>> ...
- EasyUI基础Draggable(拖)
学前easyui基于解析器,装载机.对他们来说,入门阶段,我们只需要在这一个简单的了解,第一阶段,不宜过深后,. 接着,根据easyui排列官方网站为了学习文件Draggable小工具. Dragga ...
- easyUI拖动课程进课程表
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>拖动 ...
- easyUI拖动购物车案例
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...
- easyui 属性 事件 方法
在easyui当中 属性和事件可以按照json定义的对象来使用. /*在easyui中 属性和事件的使用方法相同*/ var loginWinJson = { closed: false, closa ...
- EasyUI使用tree方法生成树形结构加载两次的问题
html代码中利用class声明了easyui-tree,导致easyUI解析class代码的时候先解析class声明中的easyui-tree这样组件就请求了一次url:然后又调用js初始化代码请求 ...
- EasyUI 兼容 IE6 方法总结
1.combobox 如果单选,multiple必须也设置为true.这个ie7如果没设置,会保持多选状态,算是一个bug. 2.combobox 最好用js来渲染,而不是一开始就class=“eas ...
随机推荐
- GO语言的进阶之路-流程控制
GO语言的进阶之路-流程控制 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 流程控制在编程语言中是最伟大的发明了,因为有了它,你可以通过很简单的流程描述来表达很复杂的逻辑.流程控制 ...
- 推荐几个精致的web UI框架及常用前端UI框架
1.Aliceui Aliceui是支付宝的样式解决方案,是一套精选的基于 spm 生态圈的样式模块集合,是 Arale 的子集,也是一套模块化的样式命名和组织规范,是写 CSS 的更好方式. git ...
- Study 1 —— Python简介
Python与其他语言的区别C\C++:学习成本高,学习周期长,偏系统底层,在开发硬件驱动.嵌入式.游戏引擎开发等领域有广泛的应用:JAVA:目前使用最广泛的编程语言,第一个跨平台运行的语言,在大型E ...
- Bulma - 基于 Flexbox 的现代化的 CSS 框架
Bulma 是一个基于 Flexbox 的现代化的 CSS 框架,设计的初衷就是移动优先(Mobile First),模块化设计,可以轻松用来实现各种简单或者复制的内容布局,浏览器支持:浏览器支持:C ...
- input单选框多选框时可用的事件
change(): 当元素的值发生改变时,会发生 change 事件. 该事件仅适用于文本域(text field),以及 textarea 和 select 元素. change() 函数触发 ch ...
- 三、编译第一步 make xxx_defconfig——Makefile.build 脚本
3.1 上章分析回顾 3.1 上章分析出的参数 3.1.1 变量 MAKECMDGOALS = xxx_defconfig KBUILD_EXTMOD = version_h := include/g ...
- nlogn LIS模板
nlogn 模板 最长上升 #include<bits/stdc++.h> using namespace std; ; int n,x,y,a[N],num[N],d[N],len; / ...
- 实现一个string类
实现要实现:构造,析构,拷贝构造,赋值的功能 1. 提供构造函数 string(), string(const string & str),string(const char * str), ...
- Java SE之初探反射机制
[Keywords]:Java,Hibernate,虚拟机,框架,SQL [Abstract]: 反射的概念:所谓的反射就是java语言在运行时拥有一项自观的能力,反射使您的程序代码能够得到装载到 ...
- RPC原理
RPC同步调用流程:(异步另说) 1)服务消费方(Client)以本地的调用方式调用远程服务. 2)客户端代理(Client Stub)接收到调用后负责将方法.参数等组装成能够进行网络传输的消息体. ...