上文已经提到过了 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. [置顶] kubernetes资源对象--limitranges

    概念 LimitRange(简称limits)基于namespace的资源管理,包括pod和container的最小.最大和default.defaultrequests等. 一旦创建limits,以 ...

  2. 【Hadoop】HADOOP 总结--思维导图

  3. 转：全面分析 Spring 的编程式事务管理及声明式事务管理

    转:from: https://www.ibm.com/developerworks/cn/education/opensource/os-cn-spring-trans/

  4. mpush 服务端配置 for windows 服务自动运行

    mpush 服务端配置 以下安装部分是参照官方的步骤, 一.安装jdk1.8并配置环境变量 示例:  http://www.cnblogs.com/endv/p/6439860.html 二.Wind ...

  5. 小tip: base64:URL背景图片与web页面性能优化

    转自:http://www.zhangxinxu.com/wordpress/?p=2341 一.base64百科 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,可用于在HTTP ...

  6. Angular 学习笔记——自定义标签

    <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...

  7. 有效的web安全信息源

    杂志:hackcto ,书安 乌云知识库,91ri.org,安全脉搏(http://www.secpulse.com/) 乌云公开漏洞,乌云热点漏洞,90sec 内网渗透找90.web注入找习科, 已 ...

  8. hdu5303（2015多校2）--Delicious Apples（贪心+枚举）

    Delicious Apples Time Limit: 5000/3000 MS (Java/Others)    Memory Limit: 524288/524288 K (Java/Other ...

  9. 基于Saltstatck实现页面实时显示tomcat启动日志(17)

    一.相关文件 master端: /srv/salt/tomcat/start.sls               #tomcat启动服务state.sls,须要自己创建 /srv/salt/tomca ...

  10. Shiro学习小结

    1. What is Shiro? Apache旗下一个开源的Java权限框架,它将软件系统的安全认证相关的功能抽取出来,实现用户身份认证,权限授权.加密.会话管理等功能,组成了一个通用的安全认证框架 ...