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 ...
随机推荐
- Winform带dataGridview的Combox控件
调用控件: public partial class Form1 : Form { public Form1() { InitializeComponent(); //---------------- ...
- Python之路： 模版篇
模块 随着python越来越强大,相同的代码也在不段复杂.为了能够更好更方便的维护,人们越来越愿意把很多写出来的功能函数保存在不同的文件夹中,这样在用的时候调用,不用的时候可以忽略.这就是模块的由 ...
- PAT (Advanced Level) 1025. PAT Ranking (25)
简单题. #include<iostream> #include<cstring> #include<cmath> #include<algorithm> ...
- 数据分析与R语言-概念点（一）
一.数据分析 1.数据分析的多层模型 常用的统计量 常用的算法 常用的数据分析工具 常见的报表 二.R语言 1.什么是R语言? R是用于统计分析.绘图的语言和操作环境.R是属于GNU系统的一个 ...
- object - c 在URL中截取特定参数的值
#pragma mark - 获取url特定的参数 -(NSString *) jiexi:(NSString *)CS webaddress:(NSString *)webaddress { NSE ...
- $_SERVER参数的含义
$_SERVER是由服务器创建的,包含了头信息.参数.路径等信息,以下是一些键代表的含义: $_SERVER['PHP_SELF'] #当前正在执行脚本的文件名,与 document root相关.$ ...
- PS基础学习
1.文件新建 (1).菜单栏新建,快捷键(Ctrl+N) (2).预设的使用--->一般用于网页制作,就选择Web,宽度,高度的单位,网页是像素 (3).分辨率的设置--->电脑网页屏幕分 ...
- iOS开发——判断手机格式
添加NSString分类 1.在NSString+Check.h中,添加方法: -(BOOL)checkPhoneNumInput; 2.在NSString+Check.m文件中: -(BOOL)ch ...
- PHP实反向代理-收藏
需求 现在有些后辍的域名不支持备案,这个时候需要用免备案主机或空间做个反向代理,这样可实现内容存放在国内主机统一管理 实现 用 php-dynamic-mirror 可实现,并在头部进行域名转换,可实 ...
- 在IOS中使用DES算法对Sqlite数据库进行内容加密存储并读取解密
在IOS中使用DES算法对Sqlite 数据库进行内容加密存储并读取解密 涉及知识点: 1.DES加密算法: 2.OC对Sqlite数据库的读写: 3.IOS APP文件存储的两种方式及读取方式. 以 ...