第一百九十四节,jQuery EasyUI,Droppable(放置)组件
jQuery EasyUI,Droppable(放置)组件
学习要点:
1.加载方式
2.属性列表
3.事件列表
4.方法列表
本节课重点了解 EasyUI 中 Droppable(放置)组件的使用方法,所谓放置,就将一个 物体入某一个物体内触发各种效果,这个组件不依赖于其他组件。
一.加载方式
- //class 加载方式
- <div id="dd"
- class="easyui-droppable"
- data-options="accept:'#box,#pox'"
- style="background:black;width:600px;height:400px;">
- </div>
droppable()将一个元素设置成放置元素,放置元素就是将另外指定的元素放置进来触发事件
- //JS 加载调用
- $('#box').droppable({
- accept:'#box,#pox',
- });
二.属性列表
accept selector 默认为 null,确定哪些元素被接受,值为要接收放置的元素id
- /**
- <div id="fzh">放置</div>
- <div id="box">
- <div id="pox">内容部分</div>
- </div>
- **/
- $(function () {
- $('#box').draggable({ //将box元素设置拖拽
- });
- $('#fzh').droppable({ //将fzh元素设置成放置
- accept:'#box,#pox' //确定哪些元素被接受,值为要接收放置的元素id
- })
- });
disabled boolean 默认为 false,如果为 true,则禁止放置
- /**
- <div id="fzh">放置</div>
- <div id="box">
- <div id="pox">内容部分</div>
- </div>
- **/
- $(function () {
- $('#box').draggable({ //将box元素设置拖拽
- });
- $('#fzh').droppable({ //将fzh元素设置成放置
- accept:'#box,#pox', //确定哪些元素被接受,值为要接收放置的元素id
- disabled:true //如果为 true,则禁止放置
- })
- });
三.事件列表
注意:以下事件 e接收的事件event对象,source接收的放置进来的元素对象
onDragEnter e,source 在被拖拽元素到放置区内的时候触发,只触发一次
- /**
- <div id="fzh">放置</div>
- <div id="box">
- <div id="pox">内容部分</div>
- </div>
- **/
- $(function () {
- $('#box').draggable({ //将box元素设置拖拽
- });
- $('#fzh').droppable({ //将fzh元素设置成放置
- accept: '#box,#pox', //确定哪些元素被接受,值为要接收放置的元素id
- onDragEnter: function (e, source) { //在被拖拽元素到放置区内的时候触发,只触发一次
- $(this).css('background', 'blue');
- }
- })
- });
onDragOver e,source 在被拖拽元素经过放置区的时候触发
- /**
- <div id="fzh">放置</div>
- <div id="box">
- <div id="pox">内容部分</div>
- </div>
- **/
- $(function () {
- $('#box').draggable({ //将box元素设置拖拽
- });
- $('#fzh').droppable({ //将fzh元素设置成放置
- accept: '#box,#pox', //确定哪些元素被接受,值为要接收放置的元素id
- onDragEnter: function (e, source) { //在被拖拽元素经过放置区的时候触发,触发多次
- $(this).css('background', 'blue');
- }
- })
- });
onDragLeave e,source 在被拖拽元素离开放置区的时候触发
- /**
- <div id="fzh">放置</div>
- <div id="box">
- <div id="pox">内容部分</div>
- </div>
- **/
- $(function () {
- $('#box').draggable({ //将box元素设置拖拽
- });
- $('#fzh').droppable({ //将fzh元素设置成放置
- accept: '#box,#pox', //确定哪些元素被接受,值为要接收放置的元素id
- onDragLeave: function (e, source) { //在被拖拽元素离开放置区的时候触发,
- $(this).css('background', 'blue');
- }
- })
- });
onDrop e,source 在被拖拽元素放入到放置区的时候触发,也就是放下鼠标左键弹起时触发
- /**
- <div id="fzh">放置</div>
- <div id="box">
- <div id="pox">内容部分</div>
- </div>
- **/
- $(function () {
- $('#box').draggable({ //将box元素设置拖拽
- });
- $('#fzh').droppable({ //将fzh元素设置成放置
- accept: '#box,#pox', //确定哪些元素被接受,值为要接收放置的元素id
- onDrop: function (e, source) { //在被拖拽元素放入到放置区的时候触发,也就是放下鼠标左键弹起时触发
- $(this).css('background', 'blue');
- }
- })
- });
四.方法列表
options none 返回属性对象
- /**
- <div id="fzh">放置</div>
- <div id="box">
- <div id="pox">内容部分</div>
- </div>
- **/
- $(function () {
- $('#box').draggable({ //将box元素设置拖拽
- });
- $('#fzh').droppable({ //将fzh元素设置成放置
- accept: '#box,#pox', //确定哪些元素被接受,值为要接收放置的元素id
- onDrop: function (e, source) { //在被拖拽元素放入到放置区的时候触发,也就是放下鼠标左键弹起时触发
- $(this).css('background', 'blue');
- }
- });
- var p = $('#fzh').droppable('options'); //options none 返回属性对象
- $.each(p, function (attr, value) { //遍历属性对象
- alert(attr + ':' + value);
- });
- });
enable none 启用放置功能
- /**
- <div id="fzh">放置</div>
- <div id="box">
- <div id="pox">内容部分</div>
- </div>
- **/
- $(function () {
- $('#box').draggable({ //将box元素设置拖拽
- });
- $('#fzh').droppable({ //将fzh元素设置成放置
- accept: '#box,#pox', //确定哪些元素被接受,值为要接收放置的元素id
- onDrop: function (e, source) { //在被拖拽元素放入到放置区的时候触发,也就是放下鼠标左键弹起时触发
- $(this).css('background', 'blue');
- }
- });
- $('#fzh').droppable('disable'); //disable none
- $('#fzh').droppable('enable'); //enable none 启用放置功能
- });
disable none 禁用放置功能
- /**
- <div id="fzh">放置</div>
- <div id="box">
- <div id="pox">内容部分</div>
- </div>
- **/
- $(function () {
- $('#box').draggable({ //将box元素设置拖拽
- });
- $('#fzh').droppable({ //将fzh元素设置成放置
- accept: '#box,#pox', //确定哪些元素被接受,值为要接收放置的元素id
- onDrop: function (e, source) { //在被拖拽元素放入到放置区的时候触发,也就是放下鼠标左键弹起时触发
- $(this).css('background', 'blue');
- }
- });
- $('#fzh').droppable('disable'); //disable none 禁用放置功能
- });
$.fn.droppable.defaults 重写默认值对象。
- $.fn.droppable.defaults.disabled = true;
第一百九十四节,jQuery EasyUI,Droppable(放置)组件的更多相关文章
- 第一百九十八节,jQuery EasyUI,ProgressBar(进度条)组件
jQuery EasyUI,ProgressBar(进度条)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 ProgressBar(进度条) ...
- 第一百九十三节,jQuery EasyUI,Draggable(拖动)组件
Draggable(拖动)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Draggable(拖动)组件的使用方法,这个组件不依赖于其 他组 ...
- 第三百九十四节,Django+Xadmin打造上线标准的在线教育平台—Xadmin后台进阶开发配置2,以及目录结构说明
第三百九十四节,Django+Xadmin打造上线标准的在线教育平台—Xadmin后台进阶开发配置2,以及目录结构说明 设置后台列表页面可以直接修改字段内容 在当前APP里的adminx.py文件里的 ...
- 第一百九十六节,jQuery EasyUI,Tooltip(提示框)组件
jQuery EasyUI,Tooltip(提示框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Tooltip(提示框)组件的使用方法, ...
- 第一百九十五节,jQuery EasyUI,Resizable(调整大小)组件
jQuery EasyUI,Resizable(调整大小)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Resizeable(调整大小)组 ...
- 第一百九十九节,jQuery EasyUI,Panel(面板)组件
jQuery EasyUI,Panel(面板)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解EasyUI中Panel(面板)组件的使用方法,这个组件不依赖于其 ...
- 第一百九十二节,jQuery EasyUI 使用
jQuery EasyUI 使用 学习要点: 1.引入必要的文件 2.加载 UI 组件的方式 3.使用 easyload.js 智能加载 4.Parser 解析器 本节课重点了解 EasyUI 的两种 ...
- 第一百零四节,JavaScript时间与日期
JavaScript时间与日期 学习要点: 1.Date类型 2.通用的方法 3.格式化方法 4.组件方法 ECMAScript提供了Date类型来处理时间和日期.Date类型内置一系列获取和设置日期 ...
- 第一百九十四天 how can I坚持
该挺妈妈话的,不该买可乐,该熬点粥喝,肚子疼,救我. 好像每天都一样,每天都在重复.. 哎.. 对了,买了点花种子,铜钱草,牡丹.玫瑰.还买了棵小多肉. 还有,老妈把咸菜给邮过来了,有点期待啊. 连续 ...
随机推荐
- 【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 ...
- windows server 2012将计算机图标添加到桌面(图文教程)(转)
windows server 2012系统安装完以后桌面默认只有回收站一个图标,如何将window常用的图标(计算机.控制面板.网络.用户文件)的图标添加到桌面呢,下面为作者本人亲测.操作简单至极. ...
- 搭建svnserve并创建提交钩子
之前做过很多这个过程了,但每次总有些地方不记得要查资料,现在顺手记录一下,以后好查. 安装svn apt-get install subversion 创建代码仓库 svnadmin create & ...
- LINUX经常使用命令小整理
系统操作: 1.重新启动机器:reboot. 2.查看某程序的进程:ps -ef|grep xxx(比如:ps -ef|grep tomcat). 3.查看当前linux系统系统版本号:lsb_rel ...
- Apache Nifi在Windows环境下搭建伪群集及证书登录
代码地址如下:http://www.demodashi.com/demo/11986.html 前些时间做了关于Apache Nifi分布式集群的搭建分享,但很多时候要搭建分布式集群机器资源是个问题, ...
- PLSQL中scott账户登录不上,报错ORA-01017: invalid username/password; logon denied
问题:PLSQL中scott账户登录不上,提示上述错误 解决方法: 1. cmd——>进入c目录; 2. 输入:sqlplus/nolog; 3. connect username/passwo ...
- URL中的#号
一.#的涵义 #代表网页中的一个位置.其右面的字符,就是该位置的标识符.比如, http://www.example.com/index.html#print 就代表网页index.html的prin ...
- .net服务器端发起请求封装
写一个静态类封装类似客户端的请求 public static class HttpHelper { #region Get public static string HttpGet(string ur ...
- git merge rebase的区别及应用场景
前两天和同事交流发现他在日常开发中跟上游保持同步每次都是用git pull操作,而我一直习惯git fetch然后rebase,发现这两种操作后的log是有些区别的.他每次pull操作之后都会自动生成 ...
- TLS
1. SSL简介 SSL(SecureSocket Layer)安全套接层,是网景公司提出的用于保证Server与client之间安全通信的一种协议,该协议位于TCP/IP协议与各应用层协议之间,即S ...