学前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

一个简单的样例,代码例如以下:

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Basic Draggable - jQuery EasyUI Demo</title>
  7.     <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/metro/easyui.css">
  8.     <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/icon.css">
  9.     <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/demo/demo.css">
  10.     <script type="text/javascript" src="jquery-easyui-1.3.6/jquery.min.js"></script>
  11.     <script type="text/javascript" src="jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
  12. </head>
  14. <body>
  15.     <h2>Basic Draggable</h2>
  16.     <p>Move the boxes below by clicking on it with mouse.</p>
  17.     <div id="dd" class="easyui-draggable" data-options="handle:'#title'" style="width:100px;height:100px;">
  18.         <div id="title" style="background:#ccc;width:100px;height:100px;">容器里面的内容</div>
  19.     </div>
  20.     <script>
  21.         $(function () {
  23.             $("#title").draggable({
  24.                 proxy: function (a) {
  25.                     var a = $('<div class="proxy_div">你拖我干啥</div>');
  26.                     a.appendTo('body');
  27.                     return a;
  28.                 },
  29.                 cursor: 'pointer',
  30.                 edge: '6'
  31.             });
  32.         });
  33.     </script>
  34. </body>
  36. </html>


上述代码的效果图须要说明的是:这里因为截图焦点不再页面上了。手型的光标看不见了。事实上光标在"你拖我干啥"上面。这也间接的说明了proxy属性为function时的效果。至于其它鼠标css，读者能够自行尝试。


事件


Draggable的事件还是比較好理解的，详细例如以下:






名称
參数
描写叙述信息




onBeforeDrag
e
拖动之前触发,返回false则取消拖拽动作




onStartDrag
e
目标对象開始拖动时触发




onDrag
e
拖动期间触发




onStopDrag
e
当拖动结束的时候触发






方法






名称
參数
描写叙述信息




options
none
返回options属性




proxy
none
假设proxy属性已经设置,则返回代理对象




enable
none
启动拖动动作




disable
none
禁用拖动动作






使用方式


两种使用的方式:


  1. 通过html标记创建,方法例如以下:


  1. <div id="dd" class="easyui-draggable" data-options="handle:'#title'" style="width:100px;height:100px;">
  2.         <div id="title" style="background:#ccc;width:100px;height:100px;">容器里面的内容</div>
  3.  </div>


2. 通过js脚本创建:


  1. <div id="dd" style="width:100px;height:100px;">
  2.     <div id="title" style="background:#ccc;">title</div>
  3. </div>
  4. <script>
  5.     $('#dd').draggable({
  6.         handle: '#title'
  7.     });
  8. </script>


Demo


对于Draggable。官网提供了一些个样例地址例如以下:http://www.jeasyui.com/demo/main/index.php?plugin=Draggable&theme=default&dir=ltr&pitem=


初学者的话,上述demo样品是足够。


over!




版权声明：本文博客原创文章。博客，未经同意，不得转载。


												


											
EasyUI基础Draggable(拖)的更多相关文章
	

    
								
  1. EasyUI基础入门之Parser(解析器)
		
    前言 JQuery EasyUI提供的组件包含功能强大的DataGrid,TreeGrid.面板.下拉组合等.用户能够组合使用这些组件,也能够单独使用当中一个.(使用的形式是以插件的方式提供的) Ea ...
    
		
    2. 
						
  2. 第一百九十三节，jQuery EasyUI，Draggable(拖动)组件
		
    Draggable(拖动)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Draggable(拖动)组件的使用方法,这个组件不依赖于其 他组 ...
    
		
    3. 
						
  3. easyui树节点拖拽排序的存储过程
		
    easyui树的拖拽排序功能 easyui树中有拖拽功能 树结构如下: 一个行政区域对应一个单位,一个单位对应多个部门,每个部门下有相关人员,功能要求: (1)行政区域没有子节点,点击text加载部门 ...
    
		
    4. 
						
  4. EasyUI基础知识Draggable(拖累)
		
    学习前easyui基于解析器,装载机.对他们来说,入门阶段,我们只需要在一个简单的理解.第一阶段,不宜过深后,.接着,根据easyui订购的文件正在研究安排官方网站Draggable插入. Dragg ...
    
		
    5. 
						
  5. easyui datagrid 列拖拽
		
    首先easyui 它有提供了拖拽的功能Draggable,那我们就可以想 拖拽标题头到另外的标题头上面我们就对datagrid的columns重新绑定一次 并刷新datagrid这个功能不就行了? & ...
    
		
    6. 
						
  6. EasyUI基础入门之Easyloader(载入器)
		
    在了解完easyui的parser(解析器)之后,接下来就是easyloader(简单载入器)的学习了. 什么是EasyLoader 正如其名字一样easyloader的作用是为了动态的载入组件所需的 ...
    
		
    7. 
						
  7. EasyUi基础学习(一)—基本组件(上)
		
    一.概述      jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复 ...
    
		
    8. 
						
  8. EasyUI基础入门之Droppable(可投掷)
		
    怎么说呢Droppable这个单词究竟是什么意思,准确来说easyui作者究竟要表达什么意思,还是不大好拿捏的.只是没关系,没有必要纠结与这些细枝末节的东西,依据官网的demo效果,就简单的将之定义为 ...
    
		
    9. 
						
  9. EasyUI基础入门之Resiable(可缩放)
		
    easyui的base插件学习已经进行到Resizable(可缩放)了.照旧看看easyui官网的API. Resiable 正如其字面意思一样(可伸缩),resiable主要是将一些html元素扩展 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. php实现删除链表中重复的节点
			
    php实现删除链表中重复的节点 一.总结 二.php实现删除链表中重复的节点 题目描述: 在一个排序的链表中,存在重复的结点,请删除该链表中重复的结点,重复的结点不保留,返回链表头指针. 例如,链表1 ...
    
			
    2. 
						
  2. 【solr专题之四】关于VelocityResponseWriter                                                    分类：            H4_SOLR/LUCENCE             2014-07-22 12:32    1639人阅读    评论(0)    收藏
			
    一.关于Velocity的基本配置 在Solr中,可以以多种方式返回搜索结果,如单纯的文本回复(XML.JSON.CSV等),也可以返回velocity,js等格式.而VelocityResponse ...
    
			
    3. 
						
  3. thinkphp mysql 坐标按距离排序
			
    $cha1 = new Model(); $shops = $cha1->query("select *,(2 * 6378.137* ASIN(SQRT(POW(SIN(3.1415 ...
    
			
    4. 
						
  4. Javascript 获取页面高度（多种浏览器）
			
    //2015年8月13日11:00:50 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: d ...
    
			
    5. 
						
  5. spring 输出mvc
			
    http://flysnowxf.iteye.com/blog/1187580 http://viralpatel.net/blogs/spring-requestheader-example/ 基于 ...
    
			
    6. 
						
  6. [Angular] Enable router tracing
			
    To enable router tracing is really simple: RouterModule.forRoot(ROUTES, { enableTracing: true }) Whe ...
    
			
    7. 
						
  7. .NET Framework基础知识（二）(转载)
			
    1.课外:为什么object数组可以赋值给object类型,int数组却不能赋值给int类型? 答:因为不管是什么什么数组都继承自Array,而Array又继承自object. 2.线程:是操作系统分 ...
    
			
    8. 
						
  8. ExtJs中window用法
			
    1.显示html var htmlTitle = "<div style='width:100%;text-align:center'>"; var fruits =  ...
    
			
    9. 
						
  9. 通过select下拉框里的value控制div显示与隐藏
			
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
    
			
    10. 
						
  10. 【60.97%】【BZOJ 1925】 [Sdoi2010]地精部落
			
    Time Limit: 10 Sec  Memory Limit: 64 MB Submit: 1194  Solved: 728 [Submit][Status][Discuss] Descript ...
    
			
    11.