easyUI draggable组件使用
easyUI draggable组件使用：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<script src="easyui/jquery.min.js"></script>
<script src="easyui/jquery.easyui.min.js"></script>
<script src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script src="js/test003.js"></script>
<link rel="stylesheet" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" href="easyui/themes/icon.css">
</head> <body>
<div id="box1" class="easyui-draggable" style="background:#ccc;width:300px;height:200px">this is draggable</div>
<div id="box" style="background:#eee;width:300px;height:200px"><div id="pox">title</div>this is JS draggable</div>
</body> </html>
$(function(argument) {
var obj = {
//revert:true,//true表示返回初始位置
//cursor:'text',//鼠标在移动过程中的样子
//handle:'#pox',//能拖动的部分，一般是在里面的title层
//disabled:true,//禁止拖动了；
//edge:10,//禁止拖动的边宽度；
//axis:'h',//v-只能竖直拖动，h-只能水平拖动
proxy: 'clone', //拖动过程中克隆一个对象
//deltaX:10,//拖动的物体其相对于鼠标的x偏移量,与proxy结合使用
//deltaY:10,//拖动的物体其相对于鼠标的y偏移量,与Proxy结合使用
// proxy:function (source) {
// console.log(source);// source是拖动的HTML对象；
// var p = $('<div style="border:1px solid #ccc;width:80px"></div>');
// p.html($(source).html()).appendTo('body');
// return p;// p是生成出来的对象，拖着走的那个；
// },
onBeforeDrag: function(e) { //对应mousedown事件
console.log('onBeforeDrag');
console.log(e);
//return false;//将取消拖动；
},
onStartDrag: function(e) { //对应mousedown事件
console.log('onStartDrag');
console.log(e);
},
onDrag: function(e) { //对应mousemove和mouseup事件
// console.log('onDrag');
// console.log(e);
//return false;//拖不动了，但是能到达目标位置；
//console.log($('#box').draggable('options'));//获得options属性
//console.log($('#box').draggable('proxy'));//获得proxy对象；
//$('#box').draggable('disable');//！！不能这样写，会崩溃的；
},
onStopDrag: function(e) { //对应mouseup事件
console.log('onStopDrag');
console.log(e);
}
};
$('#box').draggable(obj);
$('#box').draggable('disable'); // 有效果呀！
});
easyUI draggable组件使用的更多相关文章
- Easyui部分组件讲解
Easyui部分组件讲解 目 录 1.... Accordion(可折叠标签)... 2 1.1 实例... 2 1.2 参数... 3 2.... DateBo ...
- Easyui主要组件用法
Easyui主要组件用法说明: 1. combogrid用法 说明:combogrid可提供翻页列表的数据选择并可进行数据的过滤查询(查询的传人参数为q,可在控制器中获取这个参数传过来的值,下面的示 ...
- 对easyui datagrid组件的一个小改进
#对easyui datagrid组件的一个小改进 ##问题 在实际项目中使用datagrid时,受版面限制,有时候表格不能太大,这时候表格里面的内容就不能完全显示,用户需要经常拖动调整列宽才能看完整 ...
- easyUI panel组件
easyUI panel组件: 属性的使用: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- easyUI progressbar组件
easyUI progressbar组件: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- easyUI linkbutton组件
easyUI linkbutton组件: <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- easyUI tootip组件使用
easyUI tootip组件使用: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- easyUI resizable组件使用
easyUI resizable组件使用: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- easyUI droppable组件使用
easyUI droppable组件使用: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
随机推荐
- phpstorm9如何配置interpreter
找到php.exe的路径. 把php.exe 放进去就ok了
- service引用
已引用 attachmentManager 为例 ApplicationContext applicationContext = WebApplicationContextUtils.getWebAp ...
- 如何给对话框中的控件发送消息呢？Windows消息分类
以博文CTabCtrl中介绍的那样,给Tab添加子对话框来显示Tab内容.那么如果这个子对话框中含有个CTreeCtrl控件,有个Button控件,我想要模拟给这两个控件发送消息,该怎么办呢?直接把给 ...
- mysql时间函数，总是记不住，总是查。
http://www.cnblogs.com/zeroone/archive/2010/05/05/1727659.html UNIX_TIMESTAMP() UNIX_TIMESTAMP(date) ...
- 关于服务器跨域问题（使用cors解决）
1.配置cors依赖 pom中加入 <dependency> <groupId>com.thetransactioncompany</groupId> <ar ...
- VI 摘要
1 行首添加注释 1 :5,10s/^/#/g 2 sed '5,10s/^/#/' 2 替换某一个行 文本为 11111 22222 33333 替换: %s/\(.*\)/http:\/\/ ...
- Nutch是个不错的选择
对搜索引擎的理解:我们并没有google 的源代码,因此学习搜索引擎Nutch是个不错的选择.了解一个大型分布式的搜索引擎如何工作是一件让人很受益的事情.在写 Nutch的过程中,从学院派和工业派借鉴 ...
- window环境变量
首先Window中有很多乱七八糟的路径变量之类的,归类下来有几类,主要是为了我们分清楚概念,以免搞的糊涂了. 1. Window系统的环境变量:顾名思义,就是系统级别的变量,或者利用我们编程的角度来讲 ...
- HTML学习一（入门了解）
基础部分---------------------------------一:简介HTML 是用来描述网页的一种语言.HTML 指的是超文本标记语言 (Hyper Text Markup Langua ...
- Cdoefroces #354
A题 题意:给定一些数,然后求一次交换以后最大的数和最小的数之间的最大距离 分析:找到最大数和最小数的位置,然后判断是把位置大的移到最后还是把位置小的移到开始位置即可 #include <ios ...