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. QT工程pro设置实践(with QtCreator)----非弄的像VS一样才顺手?

    源地址:http://my.oschina.net/jinzei/blog/100989?fromerr=DhQJzZQe 相信大家很多和我一样,用多了微软给的便利,用人家的就十分不习惯.于是就琢磨原 ...

  2. javascript模板引擎之artTemplate 学习笔记

    <div id="content"></div><div id="content1"></div><h1& ...

  3. git使用说明

    1,git clone git://github.com/schacon/simplegit.git git工作目录,暂存目录,本地代码仓库都有代码了. 2,git pull git://github ...

  4. C语言sendto()函数-经socket传送数据以及recvfrom函数《转》

    相关函数:send, sendmsg, recv, recvfrom, socket 头文件:#include <sys/types.h>   #include <sys/socke ...

  5. UIPageControl的一个Demo

    本篇文章只是记录了一个自定义UIPageControl 的制作,其实很简单的   源码在底部会奉上链接,还望多多交流,多多支持. 首先效果图如下: 首先先做一个UISCrollView // 建议这样 ...

  6. openCV中cvSnakeImage()函数代码分析

    /*M/////////////////////////////////////////////////////////////////////////////////////// // // IMP ...

  7. vs2008中使用gdi+的设置

    vs2008中使用gdi+ 1.新建一个mfc工程 2.在stdafx.h文件中加入以下几行语句: #include <gdiplus.h>                //#pragm ...

  8. 获取synchronized锁中的阻塞队列中的线程是非公平的

    synchronized中阻塞队列的线程是非公平的 测试demo: import java.text.MessageFormat; import java.text.SimpleDateFormat; ...

  9. windows下eclipse跑junit报错：CreateProcess error=206

    from:http://isuifengfei.iteye.com/blog/1684262 windows下,eclipse中运行junit出现错误提示: Exception occurred ex ...

  10. IOT表优缺点

    <pre name="code" class="html">IOT表是将所有东西都塞到叶块中,表就是索引,可以避免回表 首先,对于IOT而言,只有索 ...