第一百九十四节,jQuery EasyUI,Droppable(放置)组件
2023-09-14 08:58:24 时间
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插件treetable 动态加载问题
- jquery中失去焦点事件_easyui失去焦点事件没触发
- jQuery EasyUI+ashx实现数据库的CIUD操作
- jQuery Google Charts—-一个封装google chart api的jquery插件详解编程语言
- jQuery Ajax 实例 全解析详解编程语言
- jQuery表单插件jquery.form.js详解编程语言
- jQuery图片切换插件jquery.cycle.js详解编程语言
- JQuery初体验(建议学习jquery)
- jQuery白痴级入门教程
- Jquery实战_读书笔记1—选择jQuery
- jQuery温习篇强大的JQuery选择器
- JQuery中getJSON的使用方法
- JQuery中html()方法使用不当带来的陷阱
- jQuery代码优化遍历篇
- jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
- jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
- js弹出层(jQuery插件形式附带reLoad功能)
- jQuery列表拖动排列具体实现
- 基于jquery实现的文字淡入淡出效果
- 利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
- JQuery弹出炫丽对话框的同时让背景变灰色
- jQuery操作元素css样式的三种方法
- 浅谈jQuery事件源码定位问题
- 鼠标悬浮显示二级菜单效果的jquery实现
- jQuery新的事件绑定机制on()示例应用
- jQuery中$.click()无效问题分析