easyUI(3) 拖动控件

最新推荐文章于 2021-09-15 17:22:09 发布

worn.xiao

最新推荐文章于 2021-09-15 17:22:09 发布

阅读量270

点赞数

文章标签： easyui javascript ecmascript

原文链接：https://mp.csdn.net/mp_blog/creation/editor/61415181

版权

<!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>
<script type="text/javascript" src="js/index.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" />
</head>
<body>
	<div id="box">
	  <div class="easyui-dialog" id="box" title="标题" style="width:400px;height:200px;">
	
	  </div>
   </div>
</body>
</html>

拖动元素的属性，方法之类的

$(function () {
		$("#box").draggable({
			revert:true  //拖动时是否返回起始位置
			cursor:'text' //拖动时的css样式
			handle:'#box' //开始拖动的句柄
			disabled:false //是否禁止拖动
			edge:500 //可以在容器中拖动的宽度
			axis:'v'//指定是可以垂直拖动 还是水平拖动
			//proxy:'clone' //可以是null，如果'clone' 克隆一个替代元素拖动,function();可以自定义一个元素拖动
			detailX:0 //被拖动的元素对于当前光标位置的x
			detailY:0//被拖动的元素对于当前光标位置的y
		    proxy:function(source){ //定义一个被拖动的对象
				var p=$('<div style="border:1px solid #ccc:width:400px;height:200px;"></div>')
				p.html($(source.html())).appendTo('body');
				return p;
				
			},
			//拖动控件的事件
			onBeforeDrag:function(e){
				alert("拖动之前触发");
			},
			onStartDrag:function(e){
				alert("开始拖动时触发");
		    }
			onDrag:function(e){
				alert("拖动过程中触发");
			},
			onStopDrag:function(e){		
				alert("在拖动停止时触发");
			}				
});