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. sql: sql developer使用

    在sql developer中登陆某数据库,在procedure里面加入一个proc,种类选ARBOR: CREATE OR REPLACE PROCEDURE PROCEDURE23 IS NAM ...

  2. HttpWebRequest 基础连接已经关闭: 接收时发生错误

    HttpWebRequest request = null; Stream webStream = null; HttpWebResponse response = null; StreamReade ...

  3. linux下编译qt5.6.0静态库——configure配置（超详细，有每一个模块的说明）（乌合之众）

    linux下编译qt5.6.0静态库 linux下编译qt5.6.0静态库 configure生成makefile 安装选项 Configure选项 第三方库: 附加选项: QNX/Blackberr ...

  4. VS2008通过 map 和 cod 文件定位崩溃代码行

    VS 2005/2008使用map文件查找程序崩溃原因 一般程序崩溃可以通过debug,找到程序在那一行代码崩溃了,最近编一个多线程的程序,都不知道在那发生错误,多线程并发,又不好单行调试,终于找到一 ...

  5. 关于CopyU！的常见问题解答

    拷优(CopyU!)常见问题解答 本常见问题解答列举了一些常见的疑问及其解释,如果您对CopyU!有任何问题,请您首先查看本解答! 本解答将会保持随时更新! 一.使用篇:     1.问:我的杀毒软件 ...

  6. JQuery - 点击图片显示大图

    效果: 目录结构: 代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="De ...

  7. 综述-如何克服HTML5的“性工能”障碍

    http://ask.dcloud.net.cn/docs HTML5自出现以来,几经风雨,虽看似很有前途,但实际使用问题太多,DCloud为此踩了无数坑.但我们从未放弃,我们加入了W3C,发起了 H ...

  8. vc 制作图片资源dll

    方法一: 使用纯WIN32 DLL方法封装纯资源第一步,通过VS2005建立WIN32 DLL 空工程第二步,设置配置属性->链接器->高级->无入口点(是/NOENTRY)设置配置 ...

  9. Lucene.Net 2.3.1开发介绍——附录一、如何下载Lucene.Net的各种版本

    原文:Lucene.Net 2.3.1开发介绍--附录一.如何下载Lucene.Net的各种版本 首先,你需要一个svn客户端.TortoiseSVN非常好用,可以从官方网站下载.下载地址:http: ...

  10. 两道二分coming~

    第一道:poj 1905Expanding Rods 题意:两道墙(距离L)之间架一根棒子,棒子受热会变长,弯曲,长度变化满足公式( s=(1+n*C)*L),求的是弯曲的高度h. 首先来看这个图: ...