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. Cookie例子

    马士兵老师的~~ cookie是服务器将信息保存在客户端的一个表示方式 名-值 服务器只能写入文档文件 每个浏览器都有唯一的标识号 且每个浏览器只允许访问与自身相关的cookie的内容 cookie分 ...

  2. ASP.NET Core 中文文档

    ASP.NET Core 中文文档 翻译计划 五月中旬 .NET Core RC2 如期发布,我们遂决定翻译 ASP.NET Core 文档.我们在 何镇汐先生. 悲梦先生. 张仁建先生和 雷欧纳德先 ...

  3. Spring boot jar 后台运行

    start(){ now=`date "+%Y%m%d%H%M%S"` exec java -Xms256m -Xmx512m -jar /alidata/server/webap ...

  4. View实现涂鸦、撤销以及重做功能

    import java.io.File; import java.io.FileNotFoundException; import java.io.FileOutputStream; import j ...

  5. linux添加用户

    useradd  -M -s /sbin/nologin  -p `openssl   passwd   -1  -salt  '奥特曼与小怪兽'  123456` wang       还是这个吧

  6. nginx的sendfile指令的作用

    linux为了解决对读文件产生的从应用空间到内核空间复制数据产生的效率影响引进了零拷贝.什么是零拷贝?这里就不多说了,请参考http://blog.csdn.net/crazyguang/articl ...

  7. HTTPClient和URLConnection核心区别分析

    首先:在 JDK 的 java.net 包中已经提供了访问 HTTP 协议的基本功能:HttpURLConnection.但是对于大部分应用程序来说,JDK 库本身提供的功能还不够丰富和灵活. 在An ...

  8. CodeForces 21C Stripe 2 构造题

    题目链接: 题目链接:点击打开链接 #include <cstdio> #include <cstring> #include <algorithm> #inclu ...

  9. ExtJs4 笔记（12） Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏

    本篇讲解三个工具栏控件.其中Ext.toolbar.Toolbar可以用来放置一些工具类操控按钮和菜单,Ext.toolbar.Paging专门用来控制数据集的分页展示,Ext.ux.statusba ...

  10. TPL异步并行编程之取消任务

    TPL异步并行编程之简单使用 在上篇随笔里面说明了Task的使用,仅仅是简单使用,有时候把一个任务交给Task去执行,但是呢还是要管理下,比如说:我要叫这个任务停止了,不做了,任务取消了,或者超时了 ...