jQuery Easy UI Draggable(拖动)组件

上文已经提到过了 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,UI,easy,draggable)