上文已经提到过了 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. DEDECMS首页和列表页调用单个图片集里的多张图片

    /**DEDECMS首页和列表页调用单个图片集里的多张图片 function Getimg($aid,$imgwith=110,$imgheight=110,$num=0) { global $dsq ...

  2. Unity定制 Image、Text的对象生成

    2016.4.14 昨天看到 雨凇的 Unity3D研究院之UGUI一个优化效率小技巧:  http://www.xuanyusong.com/archives/4006 完好了他所说的代码: usi ...

  3. ElasticSearch5.5.2：Windows下ElasticSearch安装配置

    环境 1.Windows10企业版X64 2.JDK-1.8 3.ElasticSearch-5.5.2 4.elasticsearch-head插件 5.node-v6.11.2-x64.msi 1 ...

  4. ASP.NET MVC学习---（二）EF文件结构

    之前已经简单的介绍过ORM框架和EF 也了解了EF的种种优点 那么这个EF到底长啥样子都还没见过呢 别着急 接下来,科学教育频道--走近科学 带你走进EF的内心世界~ 那么接下来就是~ 等等等等... ...

  5. wp8开发时模拟器无法联网解决方法

    关于模拟器无法联网的正常解决方案在网上有很多 这里讲的是我在做测试的时候模拟器无法上网的特殊情况 由于使用的是无线网络 可能有一些差别 过程如图: 启动模拟器 如果之前没有设置过模拟器的交换器则会出现 ...

  6. Linux学习之二-Linux系统的目录结构

    Linux学习之二-Linux系统的目录结构 在Linux的根目录下,有很多的目录,但是需要记住,对于Linux而言,一切皆文件.因此此处的目录也是文件.用ls / 命令就能看到根目录下的各类不同的目 ...

  7. SSO单点登录系列6：cas单点登录防止登出退出后刷新后退ticket失效报500错

    这个问题之前就发现过,最近有几个哥们一直在问我这个怎么搞,我手上在做另一个项目,cas就暂时搁浅了几周.现在我们来一起改一下你的应用(client2/3)的web.xml来解决这个2b问题,首先看下错 ...

  8. [Functional Programming] Transition State based on Existing State using the State ADT (liftState, composeK)

    While sometimes outside input can have influence on how a given stateful transaction transitions, th ...

  9. Swagger2 (3) 集成easymock 生成mock 测试数据

    转载:http://blog.csdn.net/sai739295732/article/details/73957138 2.可以集成swagger 3.我们来玩一下 首先你需要一个swagger ...

  10. Input.GetAxis 获取轴

    static function GetAxis (axisName : string) : float Description描述 Returns the value of the virtual a ...