上文已经提到过了 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. ConcurrentHashMap源码剖析

    原文出处: 我爱物联网 ConcurrentHashMap是Java5中新增加的一个线程安全的Map集合,可以用来替代HashTable.对于ConcurrentHashMap是如何提高其效率的,可能 ...

  2. docker开发之pyudev模块用法

    一.实现功能:获取docker_id #docker数据源: [root@docker scripts]# docker ps -a CONTAINER ID IMAGE COMMAND CREATE ...

  3. 删除windows服务命令

    打开命令框:输入sc delete 服务名 例如删除elasticsearch-service-x64服务 sc delete elasticsearch-service-x64

  4. Java源码阅读HashMap

    1类签名与注释 public class HashMap<K,V> extends AbstractMap<K,V> implements Map<K,V>, Cl ...

  5. 修改MySQL数据库存储位置datadir

    2017-04-14 1.找到mysql安装目录,默认是C:/ProgramData/MySQL/MySQL Server 5.1,找到my.ini.如果这个文件没有,自己建一个my.ini. 2.假 ...

  6. 2017.3.31 spring mvc教程（三）拦截器

    学习的博客:http://elf8848.iteye.com/blog/875830/ 我项目中所用的版本:4.2.0.博客的时间比较早,11年的,学习的是Spring3 MVC.不知道版本上有没有变 ...

  7. EffectiveJava（3）使用是由构造器或枚举类型强化singleton

    使用是由构造器或枚举类型强化singleton 普通singleton:借助AccessibleObject.setAssess方法,通过反射机制调用私有构造器.抵御这种攻击可以修改构造器,让其再被要 ...

  8. Solidworks 好的测试题模拟题

    题目:按照下图构建草图,注意设置必要的几何约束. 问题:   1.参照下图所示参数时请问其中绿色区域的面积为多少平方毫米?     题目:参照下图绘制草图轮廓,注意图中各线条之间均为相切过渡. 问题: ...

  9. php装饰器

    <?php /* * 用一个类来装饰另一个类,动态的给一个对象增加一些额外功能,这些功能一般是在这个对象调用方法前或方法后 * 比如我们要给User类增加一个登陆日志的功能 */ // 抽象构件 ...

  10. JavaScript字符编解码

    示例代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF ...