easyUI(4)droppable组件

最新推荐文章于 2020-04-09 18:05:33 发布

worn.xiao

最新推荐文章于 2020-04-09 18:05:33 发布

阅读量308

点赞数

文章标签： easyui javascript ecmascript

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

版权

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"  class=""  style="background:black;width:600px;height:400px;">
			
	</div>
</body>
</html>

$(function () {
		$("#box").droppable({
			accept:'#box,#pox'	//指定可以接受放置的组件
			disabled : true, //设置为true的时候则 禁止放置
			
			//被拖动元素经过放置区时触发
			onDragOver :function(e,source){
			
			}
			 //被拖拽的元素到放置区域时触发
			onDragEnter: function(e,source){
				
			}
			//被拖拽的元素离开放置区域时触发
			onDragLeave:function(){
				
				
			}
			//被拖拽的元素放入放置区域的时候触发
			onDrop:function(){
				
			}
		})
});

//返回属性对象
console.log($('#box').droggable('options'));
//禁止放置
$('#box').draggable('disable');
$('#box').draggable('enable');
//我们可以使用$.fn.droppable.defaults 重写默认值对象。
$.fn.droppable.defaults.disabled = true;