easyui Droppable组件实现放置特效

JavaScript 2018-12-31

所谓放置，就是将一个物体放入一个物体内，当然对于easyui来说触发各种效果是必不可少的，同时这个组件也不会依赖于其他组件。

　　Droppable的加载方式

　　1,class 加载 一直不太喜欢class方式的加载 浪费一个位置，代码一多还看着乱七八糟的。

代码如下:
Box,#pox'">

　　2,js 加载调用

rush:js;"> $("#Box").droppable({ accept:'#pox',//将元素pox 放置在元素Box中 });

　　Droppable的属性

　　　　1,accept 　　　　默认为null,确定哪些元素被接受，也就是那个元素能被放置

rush:js;"> $("#Box").droppable({ accept:'#pox',//将元素pox 放置在元素Box中 });

　　　　2，deisabled　　默认为false 如果为true，则禁止放置

rush:js;"> $("#Box").droppable({ accept:'#pox',//将元素pox 放置在元素Box中 disabled : true,//禁止放置 });

　　Droppable 事件列表

　　1,ondragenter 在被拖拽元素到放置区域内的时候触发

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

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

　　4,onDrop 在被拖拽元素放入到放置区的时候触发

rush:js;"> ondragenter /onDragOver/onDragLeave/onDrop: function (e,source){ //source 参数获取DOM元素 }

　　Droppable 方法列表

　　1，options 返回属性对象

rush:js;"> console.log($('#Box').droppable('options'));

　　2,enable,disable 和上面属性的功能是一样的 分别是启用和禁止放置

rush:js;"> $('#Box').droppable('enable/disable')

给大家展示下官方的示例吧

rush:js;"> <Meta charset="UTF-8"> Accept a Drop - jQuery EasyUI Demo

运行效果图这里就不给出了,官网直接就可以查看。OVER!

效果地址: PHP?plugin=Droppable&theme=default&dir=ltr&pitem">http://www.jeasyui.com/demo/main/index.PHP?plugin=Droppable&theme=default&dir=ltr&pitem=

easyui 1.3.5 Droppable 就此完结。

相关文章

自定义web弹窗/层：简易风格的msg与可拖放的dialog，生成博客园文章目录弹窗
前言 做过web项目开发的人对layer弹层组件肯定不陌生，作为l...
nice-validator表单验证插件的简单使用
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现
前言 图片上传是web项目常见的需求，我基于之前的博客的代码...
踹掉后端，前端导出Excel！
前言 导出Excel文件这个功能，通常都是在后端实现返回前端一...
Web Worker——js的多线程，实现统计博客园总阅读量、总评论量、总推荐量
前言 众所周知，js是单线程的，从上往下，从左往右依次执行，...
select标签 禁止选择但又能通过序列化form表单传值到后台
前言 项目开发中，我们可能会碰到这样的需求：select标签，禁...