上文已经提到过了 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. XCode工程内多Targets教程

    作者  透明de面具 原帖地址  http://www.cocoachina.com/bbs/read.php?tid-10972-fpage-0-toread--page-1.html    相信很 ...

  2. 【spring boot】14.spring boot集成mybatis,注解方式OR映射文件方式AND pagehelper分页插件【Mybatis】pagehelper分页插件分页查询无效解决方法

    spring boot集成mybatis,集成使用mybatis拖沓了好久,今天终于可以补起来了. 本篇源码中,同时使用了Spring data JPA 和 Mybatis两种方式. 在使用的过程中一 ...

  3. crossapp里的位置设置

    crossapp里有Frame.Center,这两种都是可以用来确定一个view的位置和大小. 不同点:Frame定位是以View的左上角为参照点,Center是以View的中心点为参照点 注意cro ...

  4. cmd.exe启动参数说明

    启动命令解释程序 Cmd.exe 的新范例.如果在不含参数的情况下使用,cmd 将显示操作系统的版本和版权信息. 语法 cmd [{/c | /k}] [/s] [/q] [/d] [{/a | /u ...

  5. Sql Server 表分区（转）

    什么是表分区 一般情况下,我们建立数据库表时,表数据都存放在一个文件里. 但是如果是分区表的话,表数据就会按照你指定的规则分放到不同的文件里,把一个大的数据文件拆分为多个小文件,还可以把这些小文件放在 ...

  6. Appium Android Bootstrap源代码分析之简单介绍

    在上一个系列中我们分析了UiAutomator的核心源代码,对UiAutomator是怎么执行的原理有了根本的了解.今天我们会開始另外一个在安卓平台上基于UiAutomator的新起之秀--Appiu ...

  7. ionic2项目创建回顾 及 react-native 报错处理

    ionic2: 1.创建项目: ionic start MyIonic2Project tutorial --v2 (下载 tutorial 模板来初始化项目) ionic start MyIonic ...

  8. 《Microsoft Sql server 2008 Internals》读书笔记--第六章Indexes:Internals and Management(1)

    <Microsoft Sql server 2008 Internals>索引文件夹: <Microsoft Sql server 2008 Internals>读书笔记--文 ...

  9. jquery文件上传控件 Uploadify（转）

    原文:http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上 ...

  10. Android下的ActionBar

    1 http://blog.csdn.net/lilu_leo/article/details/7674904 2 http://blog.csdn.net/eclipsexys/article/de ...