码迷,mamicode.com
首页 > Web开发 > 详细

jQuery Easy UI Droppable(放置)组件

时间:2014-09-02 11:53:34      阅读:218      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   使用   java   strong   ar   

Droppable(放置)组件也是一个基本组件,使用方法较简单,语法都在样例里面凝视了:

演示样例:

<!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.droppable.defaults.disabled = true;//重写默认值为true

	$('#dd').droppable({
		accept : '#box,#ipt',//设置哪些元素能够被接受
		disabled : false,	 //不单独设置默认值时默觉得false,当设置为true的时候则禁止放置。

		/*
			onDragEnter仅仅触发一次,而Over会在不停的拖动中不停触发,  onDragEnter触发的事件在移动过程中一瞬即逝,所以要想看清楚最好是看浏览器控制台,或者加个alert中断一下。
			onDrop是放入到放置区,松开鼠标左键,丢下的操作。
		*/
		onDragEnter : function (e, source) {
			console.log('昙花一现');
			$(this).css('background', 'blue');
			//alert('enter');
		},
		onDragOver : function (e, source) {
			console.log(source);
			$(this).css('background', 'orange');
			//alert('over');
		},
		onDragLeave : function (e, source) {
			console.log(source);
			$(this).css('background', 'green');
			//alert('over');
		},
		onDrop : function (e, source) {
			console.log(source);
			$(this).css('background', 'maroon');
			//alert('over');
		}

	});
	
	$('#dd').droppable('disable');//禁止
	$('#dd').droppable('enable'); //同意


	$('#box').draggable({
		accept : '#ipt',//设置哪些元素能够被接受
		disabled : false	 //不单独设置默认值时默觉得false,当设置为true的时候则禁止放置。
	});
	$('#ipt').draggable({
		
	});	
	
});

</script>
</head>
<body>


<div id="dd" class="easyui-droppable"
data-options="accept:'#box,#pox,#ipt'" style="width:600px;height:400px;background:#66ffff">
</div>

<div id="box" style="width:100px;height:100px;background:#ccc;">
	<span id="pox">内容部分</span>
</div>
<div id="ipt" style="width:50px;height:50px;background:#ccc;">
	内容IPT
</div>
</body>
</html>

点击下载源码

jQuery Easy UI Droppable(放置)组件

标签:style   blog   http   color   io   使用   java   strong   ar   

原文地址:http://www.cnblogs.com/mfrbuaa/p/3950993.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!