上文已经提到过了 jQuery EasyUI插件引用一般我们经常使用的有两种方式（排除easyload载入方式），所以本篇要总结的Draggable组件相同有两种方式载入：

（1）、使用class载入方式：

<div id="box" class="easyui-draggable" style="width:400px;height:200px;background:red;">

内容部分

</div>

（2）、JS 载入调用

$('#box').draggable();

相同上文也说了，使用class属性不利于我们拓展组件的其它属性，所以我们使用JS调用的方式。后面的文章也是使用JS调用的方式。

该组件有若干属性、方法及触发事件，不在这里列举了，都放到代码演示样例里而且加上凝视了。

演示样例：

<!DOCTYPE html>

<html>

<head>

<title>jQuery Easy UI</title>

<meta charset="UTF-8" />

<script type="text/javascript" src="easyui/jquery.min.js"></script>

<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />

<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />

<script>

	$(function () {

	$.fn.draggable.defaults.cursor = 'text';//*****採用这样的方式重写默认值

	$('#box').draggable({

		//revert : true,  	默认值为false  设置为true的时候拖动结束后返回起始位置

		//cursor : 'text',	定义拖动时指针的样式

		//handle : '#pox',	開始拖动时的句柄,就是点击哪里能够拖动，參数是一个JQ选择器

		//disabled : true,  设置为true的时候,禁止拖动

		//edge : 0,

		//axis : 'v',		不写：随意拖动  值为v：垂直拖动   值为h：水平拖动

		//proxy : 'clone',	当使用'clone'的时候则克隆一个替代元素拖动，假设指定一个函数，则能够自己定义替代元素。

deltaX : 50,//被拖动元素相应于当前光标位置X

		deltaY : 50,//被拖动元素相应于当前光标位置Y

		proxy : function (source) {

			var p = $('<div style="width:400px;height:200px;border:1px dashed #ccc">');

			p.html($(source).html()).appendTo('body');

			return p;

		}

		/**

		可触发的事件：

		onBeforeDrag : function (e) {

			alert('拖动前触发！

');

		},

		onBeforeDrag : function (e) {

			//return false;

		},

		onStartDrag : function (e) {

			alert('拖动開始触发！');

			console.log($('#box').draggable('proxy'));

		},

		onDrag : function (e) {

			//alert('拖动过程触发。');

		},

		onStopDrag : function (e) {

			alert('拖动结束后触发！

');

		}

		*/

	});

	//$('#box').draggable('disable');//禁止拖动

	//$('#box').draggable('enable');//能够拖动

	//alert($('#box').draggable('options'));	//返回对象属性

});

</script>

</head>

<body>

	<div id="box" style="width:400px;height:200px;background:orange;">

		<span id="pox">内容部分</span>

	</div>

</body>

</html>

点击下载源码

jQuery Easy UI Draggable(拖动)组件的更多相关文章

  1. jQuery Easy UI Droppable(放置)组件

    Droppable(放置)组件也是一个基本组件,使用方法较简单,语法都在样例里面凝视了: 演示样例: <!DOCTYPE html> <html> <head> & ...

  2. jQuery Easy UI Resizable(调整大小)组件

    Resizable(调整大小)组件,easyui基础组件之中的一个.调整大小就是能够对元素能够拖着调整大小,这个组件不依赖于其它组件,使用比較简单,相关的属性.事件都 在样例中介绍了. 演示样例: & ...

  3. jQuery Easy UI Panel(面板)组件

    panel(面板)组件,跟前面的组件使用方法差点儿都差点儿相同,也是从设置一些面板属性.操作面板触发的事件.我们可针对面板对象的操作方法这三个点去学习. 后面有一些组件要依赖于这个组件. 另一点跟前面 ...

  4. 第一百九十三节，jQuery EasyUI，Draggable(拖动)组件

    Draggable(拖动)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Draggable(拖动)组件的使用方法,这个组件不依赖于其 他组 ...

  5. jQuery Easy UI Tooptip(提示框)组件

    我们都知道DOM节点的title属性.Tooptip组件就是比較强大的title,它能够自由的设置自己的样式.位置以及有自己相关的触发事件. 演示样例: <!DOCTYPE html> & ...

  6. 7个jquery easy ui 基本组件图解

    以下给出7个jquery easy ui 基本组件: 1 基本面板 <!DOCTYPE html> <html> <head> <meta charset=& ...

  7. jQuery Easy UI ProgressBar（进度条）组件

    ProgressBar(进度条)组件,这个还是挺好玩的.我们在自己做点什么的时候常常能用到,比方上传下载文件.导入导出文档啊.加载网页等等. 应用场景非常多,使用起来还非常easy. 演示样例: &l ...

  8. jQuery Easy UI 开发笔记

    1.jQuery Easy UI主要的运行原理是通过核心的代码调用插件来实现UI效果的 2.jQuery Easy UI插件与插件之间的关系是: 一.独立式插件: 独立式插件是指:不与其他的插件具有相 ...

  9. JQuery Easy Ui （Tree树）详解（转）

    第一讲:JQuery Easy Ui到底是什么呢? 首先咱们知道JQuery是对Java Script的封装,是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等.. JQuery ui是在j ...

随机推荐

  1. SyBase 百科

    ylbtech_database_sybase 1, 百度百科 http://baike.baidu.com/view/118488.htm?fr=aladdin

  2. 解決從Ubuntu 12.04升級至12.10之後的Unity顯示問題

    FROM: http://blog.sina.com.cn/s/blog_97ef3ff4010190pe.html#bsh-75-306370781 今天中午經過系統自帶的“檢查更新”軟件從Ubun ...

  3. Android 比ListView更好用强大的RecyclerView库：RecyclerViewLibrary

    RecyclerViewLibrary A RecyclerView libirary ,has some support, like headerAdapter/TreeAdapter,and Pu ...

  4. 10g full join 优化

    今天一个女生咨询我报名学优化.聊着聊着就让我优化一个sql 由于怕泄密,所以删除了 sql . 不好意思 该sql是 olap 的, 在oracle10g 上面跑.跑一次要33秒钟.一般olap报表. ...

  5. 9.11排序与查找（一）——给定两个排序后的数组A和B，当中A的末端有足够的缓冲空间容纳B。将B合并入A并排序

    /**  * 功能:给定两个排序后的数组A和B,当中A的末端有足够的缓冲空间容纳B.将B合并入A并排序. */ /** * 问题:假设将元素插入数组A的前端,就必须将原有的元素向后移动,以腾出空间. ...

  6. charles抓https包

    Charles是一款非常好用的抓包工具,有Window,Linux,Mac OS三个版本,个人觉得比shark和TCPDump好用多了. 闲话不多说,公司将服务从http转到https,导致今天因为抓 ...

  7. 删除数据库时提示数据库正在被使用，无法删除(Cannot drop database databasename because it is currently in use)的问题

    删除数据库时提示数据库正在被使用,无法删除(Cannot drop database databasename because it is currently in use)的问题   删除数据库时提 ...

  8. 浅谈JavaScript变量声明提升

    前段时间阿里实习生内推,一面就被刷了,也是郁闷.今天系统给发通知,大致意思就是内推环节不足以了解彼此,还可以参加笔试,于是赶紧再投一次.官网流程显示笔试时间3月31日,时间快到了,开始刷题.网上搜了一 ...

  9. 高盛CEO致大学毕业生：要与有野心的人为伍

    我认为讲的非常棒.年轻人就要这样. 高盛集团首席运行官(CEO)劳尔德-贝兰克梵(Lloyd Blankfein)周四在曼哈顿贾维茨中心參加了拉瓜迪亚社区大学的第41届毕业典礼并发表演讲.在面向约10 ...

  10. 一个可以模拟GET，POST，PUT，DELET请求的HTTP在线工具

    一个简陋的HTTP请求工具,UI比较丑陋.0.0,可以用于接口调试. 之前在调试公司的远程接口的时候用的是curl,后来也在网上找到几种Http请求模拟的客户端程序.当时后来发现google app ...