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 - 使用 XML

    对XML文件进行简单的增加,删除,修改,查看等功能. XML代码: <?xml version="1.0" encoding="UTF-8"?> & ...

  2. linux命令:du,看文件大小

    du -s698 . (698字节)From <http://jingyan.baidu.com/article/a17d52855c10bf8098c8f2c9.html>

  3. QString与char*的相互转换

    原地址:http://blog.sina.com.cn/s/blog_5c70dfc80100r0nh.html 一.QString转char*   QString str; int num=0; s ...

  4. HDU 3480 DP+斜率优化

    题意:给你n个数字,然后叫你从这些数字中选出m堆,使得每一堆的总和最小,一堆的总和就是这一堆中最大值减去最小值的平方,最后要使得所有堆加起来的总和最小. 思路:对这些数字排序之后,很容易想到DP解法, ...

  5. cocos2d-x游戏开发系列教程-搭建cocos2d-x的windows开发环境

    1.在上一篇中我们成功运行了HelloCpp和TestCpp工程,我们到目录cocos2d-x-2.2.1\Debug.win32下 查看生成的文件,在我电脑上绝对路径是H:\source\cocos ...

  6. JavaScript移除数组元素

    //数组移除长度方法 var array=[]; array[0]="张三"; array[1]="李四"; array[2]="王五"; ...

  7. poj 3211 Washing Clothes(背包)

    很不错的01背包!!! 不过有点疑问!!!(注释) #include <algorithm> #include<stdio.h> #include<string.h> ...

  8. C++ Primer 学习笔记_60_重载操作符与转换 --赋值、下标、成员訪问操作符

    重载操作符与转换 --赋值.下标.成员訪问操作符 一.赋值操作符 类赋值操作符接受类类型形參,通常该形參是对类类型的const引用,但也能够是类类型或对类类型的非const引用.假设未定义这个操作符, ...

  9. Mysql RR隔离更新列没有索引 会锁全表

    <pre name="code" class="html">mysql> show variables like '%tx_isolation ...

  10. 14.2.5.4 Physical Structure of an InnoDB Index InnoDB Index 的物理结构

    14.2.5.4 Physical Structure of an InnoDB Index InnoDB Index 的物理结构 所有的InnoDB indexes 是B-trees ,index ...