首页 > 代码库 > jQuery Easy UI Draggable(拖动)组件

jQuery Easy UI Draggable(拖动)组件

2024-11-06 01:33:02   209人阅读

上文已经提到过了 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=http://www.mamicode.com/"easyui/jquery.min.js"></script>>

		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(拖动)组件


联系
我们