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(放置)组件的更多相关文章

  1. 第一百九十四节，jQuery EasyUI，Droppable(放置)组件

    jQuery EasyUI,Droppable(放置)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Droppable(放置)组件的使用方 ...

  2. jQuery Easy UI Resizable(调整大小)组件

    Resizable(调整大小)组件,easyui基础组件之中的一个.调整大小就是能够对元素能够拖着调整大小,这个组件不依赖于其它组件,使用比較简单,相关的属性.事件都 在样例中介绍了. 演示样例: & ...

  3. jQuery Easy UI Draggable(拖动)组件

    上文已经提到过了 jQuery EasyUI插件引用一般我们经常使用的有两种方式(排除easyload载入方式),所以本篇要总结的Draggable组件相同有两种方式载入: (1).使用class载入 ...

  4. jQuery Easy UI Panel(面板)组件

    panel(面板)组件,跟前面的组件使用方法差点儿都差点儿相同,也是从设置一些面板属性.操作面板触发的事件.我们可针对面板对象的操作方法这三个点去学习. 后面有一些组件要依赖于这个组件. 另一点跟前面 ...

  5. jQuery Easy UI Tooptip(提示框)组件

    我们都知道DOM节点的title属性.Tooptip组件就是比較强大的title,它能够自由的设置自己的样式.位置以及有自己相关的触发事件. 演示样例: <!DOCTYPE html> & ...

  6. 7个jquery easy ui 基本组件图解

    以下给出7个jquery easy ui 基本组件: 1 基本面板 <!DOCTYPE html> <html> <head> <meta charset=& ...

  7. jQuery Easy UI ProgressBar（进度条）组件

    ProgressBar(进度条)组件,这个还是挺好玩的.我们在自己做点什么的时候常常能用到,比方上传下载文件.导入导出文档啊.加载网页等等. 应用场景非常多,使用起来还非常easy. 演示样例: &l ...

  8. jQuery Easy UI 开发笔记

    1.jQuery Easy UI主要的运行原理是通过核心的代码调用插件来实现UI效果的 2.jQuery Easy UI插件与插件之间的关系是: 一.独立式插件: 独立式插件是指:不与其他的插件具有相 ...

  9. JQuery Easy Ui （Tree树）详解（转）

    第一讲:JQuery Easy Ui到底是什么呢? 首先咱们知道JQuery是对Java Script的封装,是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等.. JQuery ui是在j ...

随机推荐

  1. ASP.NET - 编写让别人能读懂的代码

    http://www.cnblogs.com/richieyang/p/4840614.html

  2. oracle 查询

    1. ORACLE查询数据中所存在的表 http://www.cnblogs.com/juddhu/archive/2012/03/22/2411406.html 查询数据库中所有的表: select ...

  3. 6.MIL采集和实时显示

    前面讲到的都是离线的图像获取方法,实际中我们做机器视觉都是在线采集图像和处理,处理结果决定了计算机要给出的控制信号如电机运动等,这样就实现了实时视觉反馈运动.MIL中的采集需要Matrox采集板卡的支 ...

  4. 14.10.1 InnoDB Disk I/O

    14.10 InnoDB Disk IO and File Space Management InnoDB 磁盘IO和文件空间管理: 14.10.1 InnoDB Disk I/O 14.10.2 F ...

  5. EL表达式(1)

    JSP页面中支持使用EL表达式,EL全名为Expression Language.EL表达式的主要作用有: ① 获取数据: ② 执行运算: ③ 使用EL表达式的11大隐式对象: ④ 调用Java方法. ...

  6. linux下的php网站放到Windows服务器IIS下.htaccess文件伪静态规则转换

    此办法只适合于linux下的php网站放到Windows服务器IIS下 ,  网站除了主页面正常以外  子页面全部出现404错误    这里子页面出现404 错误是说明伪静态没有开启 什么是.htac ...

  7. 中科同向备份软件Heartsone-backup（足足16个软件，可差异化备份虚拟机）

    传统的备份方式我们应该尽量避免,除非他们支持和执行使用基于(API)的虚拟环境中的管理备份.中科同向备份软件Heartsone-backup V8.0(以下简称HBU)就是通过VADP提供的一系列管理 ...

  8. uva 10581 - Partitioning for fun and profit(记忆化搜索+数论)

    题目链接:uva 10581 - Partitioning for fun and profit 题目大意:给定m,n,k,将m分解成n份,然后依照每份的个数排定字典序,而且划分时要求ai−1≤ai, ...

  9. 三次握手wireshark抓包分析，成功握手和失败握手

    启动 点击start出现下面的对话框 wireshark是捕获机器上的 某一块网卡的网络包,当机器上有多块网卡的时候,需要选择一个网卡进行捕获操作. 选择网卡 >主页面上,直接点击选中后star ...

  10. Python之常用模块（待更新）

    模块,用一砣代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用即可,提供了代码的重用性和代码间的耦合.而对于一个复杂的功能来,可能需要多个函数才 ...