无为清净楼资源网

easyui Droppable组件实现放置特效
网络编程 2024/11/20 佚名
3 2
无为清净楼资源网 Design By www.qnjia.com

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

　　Droppable的加载方式

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

复制代码 代码如下:<div id='dd' class="easyui-droppable" data-options="accept:'#box,#pox'"></div>

　　2,js 加载调用

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

　　Droppable的属性

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

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

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

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

　　Droppable 事件列表

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

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

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

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

 onDragEnter /onDragOver/onDragLeave/onDrop: function (e,source){
   //source 参数获取DOM元素
 }

　　Droppable 方法列表

　　1，options 返回属性对象

console.log($('#box').droppable('options'));

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

$('#box').droppable('enable/disable')

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

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Accept a Drop - jQuery EasyUI Demo</title>
 <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/metro/easyui.css">
 <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/icon.css">
 <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/demo/demo.css">
 <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.min.js">


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




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


easyui 1.3.5 Droppable 就此完结。
标签：
easyui,Droppable
无为清净楼资源网 Design By www.qnjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
www.qnjia.com 无为清净楼资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接