EasyUI基础Draggable(拖)
学前easyui基于解析器,装载机。对他们来说,入门阶段,我们只需要在这一个简单的了解,第一阶段,不宜过深后,。
接着,根据easyui排列官方网站为了学习文件Draggable小工具。
Draggable是什么
Draggable是easyui中用于实现拖拽功能的一个插件。利用它,我们能够实现控件的拖拽效果。
Draggble覆盖默认值$.fn.draggable.defaults。
Draggable
以下看看官网对于Draggable的描写叙述吧。
属性
其属性例如以下表所看到的:
名称 |
类型 |
描写叙述 |
默认值 |
proxy |
string,function |
在拖动过程中会被使用到的一个代理元素,当设置为‘clone’,一个clone的元素作为代 理对象使用,假设定义的是一个函数,该函数必须返回一个JQuery对象,以下展示怎样 创建一个简单的代理对象. $('dragitem').draggable({ proxy:function(source){ var p = $('<div style="border:1px solid=#ccc;width:80px"></div>'); p.html($(source).html()).appendTo('body'); return p; } }); |
null |
revert |
boolean |
假设设置为true,当拖动结束后,该元素将回到開始的位置 |
false |
cursor |
string |
当拖动的时候,一个css cursor(鼠标的样式),这里须要说明的是easyui的鼠标样式有很多比如:等待状态、help、手型等等。其cursor属性的值和w3c相应。后面我将给出cursor具有哪些可选值。 |
move |
deltaX |
number |
拖动元素位置x相应当前光标 |
null |
deltaY |
number |
拖动元素位置y相应当前光标 |
null |
handle |
selector |
能够被拖动元素的选择器 |
null |
disabled |
boolean |
true停止拖拽 |
false |
edge |
number |
拖动的宽度,距离边缘多少能够被拖动() |
0 |
axis |
string |
定义一个拖动元素拖动的轴,能够是'v'或者'h',当设置为 null时,能够水平或垂直方向随意拖动 |
null |
上面表格中有一个很有意思的属性"cursor",表示为拖动元素时鼠标的样式,只是其值域是什么呢?
事实上W3C已经定义好了,详细cursor可选的值能够參考例如以下链接:http://www.w3school.com.cn/tiy/t.asp?f=csse_cursor
一个简单的样例,代码例如以下:
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>Basic Draggable - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/metro/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/icon.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/demo/demo.css">
<script type="text/javascript" src="jquery-easyui-1.3.6/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
</head> <body>
<h2>Basic Draggable</h2>
<p>Move the boxes below by clicking on it with mouse.</p>
<div id="dd" class="easyui-draggable" data-options="handle:'#title'" style="width:100px;height:100px;">
<div id="title" style="background:#ccc;width:100px;height:100px;">容器里面的内容</div>
</div>
<script>
$(function () { $("#title").draggable({
proxy: function (a) {
var a = $('<div class="proxy_div">你拖我干啥</div>');
a.appendTo('body');
return a;
},
cursor: 'pointer',
edge: '6'
});
});
</script>
</body> </html>
上述代码的效果图须要说明的是:这里因为截图焦点不再页面上了。手型的光标看不见了。事实上光标在"你拖我干啥"上面。这也间接的说明了proxy属性为function时的效果。至于其它鼠标css,读者能够自行尝试。
事件
Draggable的事件还是比較好理解的,详细例如以下:
名称 | 參数 | 描写叙述信息 |
onBeforeDrag | e | 拖动之前触发,返回false则取消拖拽动作 |
onStartDrag | e | 目标对象開始拖动时触发 |
onDrag | e | 拖动期间触发 |
onStopDrag | e | 当拖动结束的时候触发 |
方法
名称 | 參数 | 描写叙述信息 |
options | none | 返回options属性 |
proxy | none | 假设proxy属性已经设置,则返回代理对象 |
enable | none | 启动拖动动作 |
disable | none | 禁用拖动动作 |
使用方式
两种使用的方式:
- 通过html标记创建,方法例如以下:
<div id="dd" class="easyui-draggable" data-options="handle:'#title'" style="width:100px;height:100px;">
<div id="title" style="background:#ccc;width:100px;height:100px;">容器里面的内容</div>
</div>
2. 通过js脚本创建:
<div id="dd" style="width:100px;height:100px;">
<div id="title" style="background:#ccc;">title</div>
</div>
<script>
$('#dd').draggable({
handle: '#title'
});
</script>
Demo
对于Draggable。官网提供了一些个样例地址例如以下:http://www.jeasyui.com/demo/main/index.php?plugin=Draggable&theme=default&dir=ltr&pitem=
初学者的话,上述demo样品是足够。
over!
版权声明:本文博客原创文章。博客,未经同意,不得转载。
EasyUI基础Draggable(拖)的更多相关文章
- EasyUI基础入门之Parser(解析器)
前言 JQuery EasyUI提供的组件包含功能强大的DataGrid,TreeGrid.面板.下拉组合等.用户能够组合使用这些组件,也能够单独使用当中一个.(使用的形式是以插件的方式提供的) Ea ...
- 第一百九十三节,jQuery EasyUI,Draggable(拖动)组件
Draggable(拖动)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Draggable(拖动)组件的使用方法,这个组件不依赖于其 他组 ...
- easyui树节点拖拽排序的存储过程
easyui树的拖拽排序功能 easyui树中有拖拽功能 树结构如下: 一个行政区域对应一个单位,一个单位对应多个部门,每个部门下有相关人员,功能要求: (1)行政区域没有子节点,点击text加载部门 ...
- EasyUI基础知识Draggable(拖累)
学习前easyui基于解析器,装载机.对他们来说,入门阶段,我们只需要在一个简单的理解.第一阶段,不宜过深后,.接着,根据easyui订购的文件正在研究安排官方网站Draggable插入. Dragg ...
- easyui datagrid 列拖拽
首先easyui 它有提供了拖拽的功能Draggable,那我们就可以想 拖拽标题头到另外的标题头上面我们就对datagrid的columns重新绑定一次 并刷新datagrid这个功能不就行了? & ...
- EasyUI基础入门之Easyloader(载入器)
在了解完easyui的parser(解析器)之后,接下来就是easyloader(简单载入器)的学习了. 什么是EasyLoader 正如其名字一样easyloader的作用是为了动态的载入组件所需的 ...
- EasyUi基础学习(一)—基本组件(上)
一.概述 jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复 ...
- EasyUI基础入门之Droppable(可投掷)
怎么说呢Droppable这个单词究竟是什么意思,准确来说easyui作者究竟要表达什么意思,还是不大好拿捏的.只是没关系,没有必要纠结与这些细枝末节的东西,依据官网的demo效果,就简单的将之定义为 ...
- EasyUI基础入门之Resiable(可缩放)
easyui的base插件学习已经进行到Resizable(可缩放)了.照旧看看easyui官网的API. Resiable 正如其字面意思一样(可伸缩),resiable主要是将一些html元素扩展 ...
随机推荐
- HDU1248 寒冰王座 【数学题】or【全然背包】
寒冰王座 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submi ...
- 如何在 BitNami 中创建多个 WEB 应用?(转)
本文最后更新于2015年7月14日,已超过半年没有更新,如果内容失效,请反馈,谢谢! 如您所知,BitNami 为诸多开源 WEB 应用提供集成环境的一键安装解决方案,像著名的开源 WEB 程序 Wo ...
- Java解惑八:很多其它库之谜
本文是依据JAVA解惑这本书,做的笔记. 电子书见:http://download.csdn.net/detail/u010378705/7527721 谜题76 将线程的启动方法start(),写成 ...
- ios开发runtime学习四:动态添加属性
#import "ViewController.h" #import "Person.h" #import "NSObject+Property.h& ...
- iOS开发ARC与MRC下单例的完整写法与通用宏定义
#import "XMGTool.h" /** * 1:ARC下的完整的单例写法:alloc内部会调用+(instancetype)allocWithZone:(struct _N ...
- ConcurrentLinkedQueue使用方法
它是一个基于链接节点的无界线程安全队列.该队列的元素遵循先进先出的原则.头是最先加入的,尾是最近加入的. 插入元素是追加到尾上.提取一个元素是从头提取.当多个线程共享访问一个公共 collection ...
- php实现 删除字符串中出现次数最少的字符
php实现 删除字符串中出现次数最少的字符 一.总结 一句话总结:数组排序是改变数组的,而其它函数一般不改变原数据,比如str_replace(); 1.单案例测试通过而多案例测试不通过怎么办? 检 ...
- 监听text等的改变事件
oninput事件是html5的标准事件,支持ie9和以上以及其他的火狐啊谷歌啊等浏览器 ie9以下的可以用onpropertychange <head> <script t ...
- tomcat 启动项目时出现 ZipException: error in opening zip file
错误情况 项目用 maven 打好 war 包后放到 tomcat 下,启动 tomcat,出现以下错误 3-Nov-2017 12:21:44.346 严重 [localhost-startStop ...
- css3 实现水晶按钮
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee432e), color-sto ...