jQuery EasyUI,Droppable(放置)组件

学习要点:

  1.加载方式

  2.属性列表

  3.事件列表

  4.方法列表

本节课重点了解 EasyUI 中 Droppable(放置)组件的使用方法,所谓放置,就将一个 物体入某一个物体内触发各种效果,这个组件不依赖于其他组件。

一.加载方式

  1. //class 加载方式
  2. <div id="dd"
  3. class="easyui-droppable"
  4. data-options="accept:'#box,#pox'"
  5. style="background:black;width:600px;height:400px;">
  6. </div>

droppable()将一个元素设置成放置元素,放置元素就是将另外指定的元素放置进来触发事件

  1. //JS 加载调用
  2. $('#box').droppable({
  3.   accept:'#box,#pox',
  4. });

二.属性列表

accept selector 默认为 null,确定哪些元素被接受,值为要接收放置的元素id

  1. /**
  2. <div id="fzh">放置</div>
  3.  
  4. <div id="box">
  5. <div id="pox">内容部分</div>
  6. </div>
  7. **/
  8.  
  9. $(function () {
  10. $('#box').draggable({ //将box元素设置拖拽
  11.  
  12. });
  13. $('#fzh').droppable({ //将fzh元素设置成放置
  14. accept:'#box,#pox' //确定哪些元素被接受,值为要接收放置的元素id
  15. })
  16. });

disabled boolean 默认为 false,如果为 true,则禁止放置

  1. /**
  2. <div id="fzh">放置</div>
  3.  
  4. <div id="box">
  5. <div id="pox">内容部分</div>
  6. </div>
  7. **/
  8.  
  9. $(function () {
  10. $('#box').draggable({ //将box元素设置拖拽
  11.  
  12. });
  13. $('#fzh').droppable({ //将fzh元素设置成放置
  14. accept:'#box,#pox', //确定哪些元素被接受,值为要接收放置的元素id
  15. disabled:true //如果为 true,则禁止放置
  16. })
  17. });

三.事件列表

注意:以下事件 e接收的事件event对象,source接收的放置进来的元素对象

onDragEnter  e,source 在被拖拽元素到放置区内的时候触发,只触发一次

  1. /**
  2. <div id="fzh">放置</div>
  3.  
  4. <div id="box">
  5. <div id="pox">内容部分</div>
  6. </div>
  7. **/
  8.  
  9. $(function () {
  10. $('#box').draggable({ //将box元素设置拖拽
  11.  
  12. });
  13. $('#fzh').droppable({ //将fzh元素设置成放置
  14. accept: '#box,#pox', //确定哪些元素被接受,值为要接收放置的元素id
  15. onDragEnter: function (e, source) { //在被拖拽元素到放置区内的时候触发,只触发一次
  16. $(this).css('background', 'blue');
  17. }
  18. })
  19. });

onDragOver  e,source 在被拖拽元素经过放置区的时候触发

  1. /**
  2. <div id="fzh">放置</div>
  3.  
  4. <div id="box">
  5. <div id="pox">内容部分</div>
  6. </div>
  7. **/
  8.  
  9. $(function () {
  10. $('#box').draggable({ //将box元素设置拖拽
  11.  
  12. });
  13. $('#fzh').droppable({ //将fzh元素设置成放置
  14. accept: '#box,#pox', //确定哪些元素被接受,值为要接收放置的元素id
  15. onDragEnter: function (e, source) { //在被拖拽元素经过放置区的时候触发,触发多次
  16. $(this).css('background', 'blue');
  17. }
  18. })
  19. });

onDragLeave  e,source 在被拖拽元素离开放置区的时候触发

  1. /**
  2. <div id="fzh">放置</div>
  3.  
  4. <div id="box">
  5. <div id="pox">内容部分</div>
  6. </div>
  7. **/
  8.  
  9. $(function () {
  10. $('#box').draggable({ //将box元素设置拖拽
  11.  
  12. });
  13. $('#fzh').droppable({ //将fzh元素设置成放置
  14. accept: '#box,#pox', //确定哪些元素被接受,值为要接收放置的元素id
  15. onDragLeave: function (e, source) { //在被拖拽元素离开放置区的时候触发,
  16. $(this).css('background', 'blue');
  17. }
  18. })
  19. });

onDrop  e,source 在被拖拽元素放入到放置区的时候触发,也就是放下鼠标左键弹起时触发

  1. /**
  2. <div id="fzh">放置</div>
  3.  
  4. <div id="box">
  5. <div id="pox">内容部分</div>
  6. </div>
  7. **/
  8.  
  9. $(function () {
  10. $('#box').draggable({ //将box元素设置拖拽
  11.  
  12. });
  13. $('#fzh').droppable({ //将fzh元素设置成放置
  14. accept: '#box,#pox', //确定哪些元素被接受,值为要接收放置的元素id
  15. onDrop: function (e, source) { //在被拖拽元素放入到放置区的时候触发,也就是放下鼠标左键弹起时触发
  16. $(this).css('background', 'blue');
  17. }
  18. })
  19. });

四.方法列表

options  none 返回属性对象

  1. /**
  2. <div id="fzh">放置</div>
  3.  
  4. <div id="box">
  5. <div id="pox">内容部分</div>
  6. </div>
  7. **/
  8.  
  9. $(function () {
  10. $('#box').draggable({ //将box元素设置拖拽
  11.  
  12. });
  13. $('#fzh').droppable({ //将fzh元素设置成放置
  14. accept: '#box,#pox', //确定哪些元素被接受,值为要接收放置的元素id
  15. onDrop: function (e, source) { //在被拖拽元素放入到放置区的时候触发,也就是放下鼠标左键弹起时触发
  16. $(this).css('background', 'blue');
  17. }
  18. });
  19. var p = $('#fzh').droppable('options'); //options none 返回属性对象
  20. $.each(p, function (attr, value) { //遍历属性对象
  21. alert(attr + ':' + value);
  22. });
  23. });

enable  none 启用放置功能

  1. /**
  2. <div id="fzh">放置</div>
  3.  
  4. <div id="box">
  5. <div id="pox">内容部分</div>
  6. </div>
  7. **/
  8.  
  9. $(function () {
  10. $('#box').draggable({ //将box元素设置拖拽
  11.  
  12. });
  13. $('#fzh').droppable({ //将fzh元素设置成放置
  14. accept: '#box,#pox', //确定哪些元素被接受,值为要接收放置的元素id
  15. onDrop: function (e, source) { //在被拖拽元素放入到放置区的时候触发,也就是放下鼠标左键弹起时触发
  16. $(this).css('background', 'blue');
  17. }
  18. });
  19. $('#fzh').droppable('disable'); //disable none
  20. $('#fzh').droppable('enable'); //enable none 启用放置功能
  21. });

disable  none 禁用放置功能

  1. /**
  2. <div id="fzh">放置</div>
  3.  
  4. <div id="box">
  5. <div id="pox">内容部分</div>
  6. </div>
  7. **/
  8.  
  9. $(function () {
  10. $('#box').draggable({ //将box元素设置拖拽
  11.  
  12. });
  13. $('#fzh').droppable({ //将fzh元素设置成放置
  14. accept: '#box,#pox', //确定哪些元素被接受,值为要接收放置的元素id
  15. onDrop: function (e, source) { //在被拖拽元素放入到放置区的时候触发,也就是放下鼠标左键弹起时触发
  16. $(this).css('background', 'blue');
  17. }
  18. });
  19. $('#fzh').droppable('disable'); //disable none 禁用放置功能
  20. });

$.fn.droppable.defaults 重写默认值对象。

  1. $.fn.droppable.defaults.disabled = true;

第一百九十四节,jQuery EasyUI,Droppable(放置)组件的更多相关文章

  1. 第一百九十八节,jQuery EasyUI,ProgressBar(进度条)组件

    jQuery EasyUI,ProgressBar(进度条)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 ProgressBar(进度条) ...

  2. 第一百九十三节,jQuery EasyUI,Draggable(拖动)组件

    Draggable(拖动)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Draggable(拖动)组件的使用方法,这个组件不依赖于其 他组 ...

  3. 第三百九十四节,Django+Xadmin打造上线标准的在线教育平台—Xadmin后台进阶开发配置2,以及目录结构说明

    第三百九十四节,Django+Xadmin打造上线标准的在线教育平台—Xadmin后台进阶开发配置2,以及目录结构说明 设置后台列表页面可以直接修改字段内容 在当前APP里的adminx.py文件里的 ...

  4. 第一百九十六节,jQuery EasyUI,Tooltip(提示框)组件

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

  5. 第一百九十五节,jQuery EasyUI,Resizable(调整大小)组件

    jQuery EasyUI,Resizable(调整大小)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Resizeable(调整大小)组 ...

  6. 第一百九十九节,jQuery EasyUI,Panel(面板)组件

    jQuery EasyUI,Panel(面板)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解EasyUI中Panel(面板)组件的使用方法,这个组件不依赖于其 ...

  7. 第一百九十二节,jQuery EasyUI 使用

    jQuery EasyUI 使用 学习要点: 1.引入必要的文件 2.加载 UI 组件的方式 3.使用 easyload.js 智能加载 4.Parser 解析器 本节课重点了解 EasyUI 的两种 ...

  8. 第一百零四节,JavaScript时间与日期

    JavaScript时间与日期 学习要点: 1.Date类型 2.通用的方法 3.格式化方法 4.组件方法 ECMAScript提供了Date类型来处理时间和日期.Date类型内置一系列获取和设置日期 ...

  9. 第一百九十四天 how can I坚持

    该挺妈妈话的,不该买可乐,该熬点粥喝,肚子疼,救我. 好像每天都一样,每天都在重复.. 哎.. 对了,买了点花种子,铜钱草,牡丹.玫瑰.还买了棵小多肉. 还有,老妈把咸菜给邮过来了,有点期待啊. 连续 ...

随机推荐

  1. 【mybatis】mybatis方法访问报错:org.apache.ibatis.builder.IncompleteElementException: Could not find result map com.pisen.cloud.luna.ms.goods.base.domain.GoodsConfigQuery

    在调用mapper.xml中的方法的时候,报错: org.apache.ibatis.builder.IncompleteElementException: Could not find result ...

  2. windows server 2012将计算机图标添加到桌面(图文教程)(转)

    windows server 2012系统安装完以后桌面默认只有回收站一个图标,如何将window常用的图标(计算机.控制面板.网络.用户文件)的图标添加到桌面呢,下面为作者本人亲测.操作简单至极. ...

  3. 搭建svnserve并创建提交钩子

    之前做过很多这个过程了,但每次总有些地方不记得要查资料,现在顺手记录一下,以后好查. 安装svn apt-get install subversion 创建代码仓库 svnadmin create & ...

  4. LINUX经常使用命令小整理

    系统操作: 1.重新启动机器:reboot. 2.查看某程序的进程:ps -ef|grep xxx(比如:ps -ef|grep tomcat). 3.查看当前linux系统系统版本号:lsb_rel ...

  5. Apache Nifi在Windows环境下搭建伪群集及证书登录

    代码地址如下:http://www.demodashi.com/demo/11986.html 前些时间做了关于Apache Nifi分布式集群的搭建分享,但很多时候要搭建分布式集群机器资源是个问题, ...

  6. PLSQL中scott账户登录不上,报错ORA-01017: invalid username/password; logon denied

    问题:PLSQL中scott账户登录不上,提示上述错误 解决方法: 1. cmd——>进入c目录; 2. 输入:sqlplus/nolog; 3. connect username/passwo ...

  7. URL中的#号

    一.#的涵义 #代表网页中的一个位置.其右面的字符,就是该位置的标识符.比如, http://www.example.com/index.html#print 就代表网页index.html的prin ...

  8. .net服务器端发起请求封装

    写一个静态类封装类似客户端的请求 public static class HttpHelper { #region Get public static string HttpGet(string ur ...

  9. git merge rebase的区别及应用场景

    前两天和同事交流发现他在日常开发中跟上游保持同步每次都是用git pull操作,而我一直习惯git fetch然后rebase,发现这两种操作后的log是有些区别的.他每次pull操作之后都会自动生成 ...

  10. TLS

    1. SSL简介 SSL(SecureSocket Layer)安全套接层,是网景公司提出的用于保证Server与client之间安全通信的一种协议,该协议位于TCP/IP协议与各应用层协议之间,即S ...