Draggable(拖动)组件
一.加载方式 //class 加载方式 <div id="box" class="easyui-draggable" style="width:400px;height:200px;background:red;"> 内容部分 </div> //JS 加载调用 $('#box').draggable();
加载方式
属性列表
//属性设置
$('#box').draggable({
revert : true,
cursor : 'text',
handle : '#pox',
disabled : false,
edge : 50,
axis : 'v',
proxy: 'clone',
deltaX : 10,
deltaY : 10,
proxy: function(source){
var p = $('<div style="border:1px solid #ccc;width:400px;height:200px;"></div>');
p.html($(source).html()).appendTo('body');
return p;
},
});
事件列表
$('#box').draggable({
onBeforeDrag : function (e) {
alert('拖动之前触发!');
//return false;
},
onStartDrag : function (e) {
alert('拖动时触发!');
},
onDrag : function (e) {
alert('拖动过程中触发!');
},
onStopDrag : function (e) {
alert('在拖动停止时触发!');
},
});
Draggable 方法
//返回属性对象
console.log($('#box').draggable('options'));
//返回代理元素
onStartDrag : function (e) {
console.log($('#box').draggable('proxy'));
},
//禁止拖动
$('#box').draggable('disable');
//允许拖放
$('#box').draggable('enable');
PS:我们可以使用$.fn.draggable.defaults 重写默认值对象。
$.fn.draggable.defaults.cursor = 'text';
Draggable(拖动)组件的更多相关文章
- 第一百九十三节,jQuery EasyUI,Draggable(拖动)组件
Draggable(拖动)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Draggable(拖动)组件的使用方法,这个组件不依赖于其 他组 ...
- jQuery Easy UI Draggable(拖动)组件
上文已经提到过了 jQuery EasyUI插件引用一般我们经常使用的有两种方式(排除easyload载入方式),所以本篇要总结的Draggable组件相同有两种方式载入: (1).使用class载入 ...
- Draggable拖动
Draggable(拖动)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 EasyUI中Draggable(拖动)组件的使用方法,这个组件不依赖于其他组件. 1.加载方式 / ...
- [刘阳Java]_easyui-draggable拖动组件_第4讲
easyui-draggable的拖动组件还是比较好用的,它能够快速地实现网页中元素的拖动效果 实现easyui-draggable拖动组件有两种方式:纯HTML方式和JS方式 纯HTML方式实现拖动 ...
- 微信开发新增拖动组件--movableview介绍
小程序的更新中,也新增了一个UI组件,它就是视图组件movable-view,它需要配合movable-area来一起使用.简单来说,它就是一个支持在指定区域内可以拖动内容的容器.我们来看一个简单的示 ...
- EasyUI - Draggable 拖动控件
效果: html代码: <div id="box" style="width: 400px; height: 200px; background-color: #f ...
- Draggable(拖动框)
一.class加载方式 <div id="box" class="easyui-draggable" style="width:400px;he ...
- Slider( 滑动条) 组件
本节课重点了解 EasyUI 中 Slider(滑动条)组件的使用方法,这个组件依赖于Draggable(拖动)组件. 一. 加载方式//class 加载方式<input class=" ...
- EasyUi基础学习(一)—基本组件(上)
一.概述 jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复 ...
随机推荐
- java关键字 (jdk6),各自的含义是什么?
Abstract 抽象的 一个Java语言中的关键字,用在类的声明中来指明一个类是不能被实例化的,但是可以被其它类继承.一个抽象类可以使用抽象方法,抽象方法不需要实现,但是需要在子类中被实现. bre ...
- mysql数据表如何导入MSSQL中
本案例演示所用系统是windows server 2012.其它版本windows操作系统类似. 1,首先需要下载mysql odbc安装包. http://dev.mysql.com/downloa ...
- win7下搭建nginx+php的开发环境
本来在win7下用的是IIS做web服务器,但近来因项目需求的原因,需要在服务器遇到404错误的时候自动做转向(不是在客户端的跳转,而是在服务器收到客户端请求去某目录下读取文件返回时,如果发现目录或目 ...
- Java导入证书失败Keystore was tampered with, or password was incorrect
keytool 错误: java.io.IOException: Keystore was tampered with, or password was incorrect 在进行证书相关操作, ...
- table 自动换行
<table border=" align="center" style="table-layout:fixed;word-wrap:break-word ...
- po 和 mo 的互相转换
反编译 mo 文件成 po 文件 msgunfmt test.mo -o test.po 编码 po 文件为 mo 文件 msgfmt -o test.mo test.po 记着备用.
- 转:【创龙TMS320C6748开发板试用】相关软件的安装与基本设置+CCS安装失败分析
http://bbs.elecfans.com/jishu_542000_1_1.html
- Storm测试报告
http://blog.csdn.net/jmppok/article/details/17614431
- AltiumDesigner14板框定义及3D显示图文教程
很多人都跟我反应说AD14不能定义板框大小,或者说是不知道怎么定义板框的大小,确实AD14的操作和AD13或者是AD10的版本斗有一些差异,尤其是现在最新的版本AltiumDesigner14.3.1 ...
- 【HDOJ】4515 小Q系列故事——世界上最遥远的距离
简单题目,先把时间都归到整年,然后再计算.同时为了防止减法出现xx月00日的情况,需要将d先多增加1,再恢复回来. #include <cstdio> #include <cstri ...