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 ...
随机推荐
- SpringMVC强大的数据绑定
6.6.2.@RequestParam绑定单个请求参数值 @RequestParam用于将请求参数区数据映射到功能处理方法的参数上. public String requestparam1(@Requ ...
- zookeeper常用sehll命令
ZooKeeper服务命令: 在准备好相应的配置之后,可以直接通过zkServer.sh 这个脚本进行服务的相关操作 1. 启动ZK服务: sh bin/zkServer.sh start ...
- Unity 之 c# 版的 CharacterMotor
using System; using System.Collections; using UnityEngine; // This class just convert from Character ...
- 浅谈Linux集群
集群听起来好像就是一个很高端很的技术,其实不是的,那么集群其实就是一堆计算机的集合,给用户提供同一个服务的一组计算机,就称之为集群,对于用户而言好像就是一台计算机提供的服务,集群主要分为三大类, ...
- 二分查找javascript
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- PHP 删除非法UTF-8字符
//reject overly long 2 byte sequences, as well as characters above U+10000 and replace with ? $some_ ...
- （四）Jquery Mobile表单
Jquery Mobile表单与列表 一.JM表单 1.表单 普通html表单 效果: 2.只能输入数字的表单 效果: ...
- Ubuntu如何备份和恢复系统 - 落花往事的日志 - 网易博客
在 使用Ubuntu之前,相信很多人都有过使用Windows系统的经历.如果你备份过Windows系统,那么你一定记忆犹新:首先需要找到一个备份工 具(通常都是私有软件),然后重启电脑进入备份工具提供 ...
- HTML5绘制矩形和圆形并且还有获取在这个图层内的坐标的思路和代码 - feilong_12的专栏 - 博客频道 - CSDN.NET
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- Mac下node.js卸载方法收集
brew的安装方式 直接通过一条命令 brew uninstall nodejs 官网下载pkg安装包的 通过这条命令 sudo rm -rf /usr/local/{bin/{node,npm},l ...