【连载】研究EasyUI系统—Droppable组件

来源：互联网发布：无人机的优化运用编辑：程序博客网时间：2024/05/16 17:00

　　droppable构建了一个可拖入的区域。droppable组件往往和draggable组件一起使用，可以将draggable组件拖入到droppable组件内，实现自身想达到的效果，我们首先通过一个极为简单的回收站例子来了解一下droppable组件。

<html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>        <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />        <script type="text/javascript" src="easyui/jquery.min.js"></script>        <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>        <title>droppableDemo</title>        <style>            .droppable_container {                width:64px;                height: 64px;            }            .imgRecy {                width:64px;                height: 64px;            }            .imgDoc {                margin: 50px 0 0 50px;                width:48px;                height: 48px;            }        </style>    </head>    <body>        <div id="container">          <div class="easyui-droppable droppable_container" id="droppableContainer">            <img src="images/recy.png" class="imgRecy" id="recy">          </div>          <div id="doc1" class="easyui-draggable">            <img src="images/doc.png" id="d1" class="imgDoc">          </div>          <div id="doc2" class="easyui-draggable">            <img src="images/doc.png" id="d2" class="imgDoc">          </div>      </div>    <script>        $("#droppableContainer").droppable({            accept:'#doc1, #doc2',            onDrop:function(e, source) {                $(source).remove();                $("#recy").attr("src","images/recy2.png");            }        });      </script>    </body></html>

　　下面分别是拖入前和拖入后的效果图。
　　 droppable组件效果图
　　其实原理很简单。我们首先准备两个垃圾桶图标，一张是空垃圾桶，另一张是满的垃圾桶，同时再准备一个文件图标。将垃圾桶构造为droppable组件，同时将两个文件构造为draggable组件。一旦将任意一个文件拖到droppable组件内部（即垃圾桶中），通过jQuery将该文件图标从页面中删除，同时将空垃圾桶图标变换为满垃圾桶图标即可。
　　
　　droppable组件属性：

属性名称属性值类型属性默认值描述 accept 选择器 null 指定哪些draggable可以被放入。 disabled 布尔值 false 禁用组件。

　　accept属性指定了哪些draggable是可以被放入到droppable组件内的，值为draggable组件的选择器（如“#doc1”）。上例代码允许两个文件图标放入，也就是id为“doc1”和“doc2”的div。
　　
　　droppable组件方法：

方法名称参数描述 options 无返回所有属性。 enable 无启用组件。 disable 无禁用组件。

方法就三个，很简单，也不多做说明。

　　droppable组件事件：

事件名称参数描述 onDragEnter e, source 当draggable组件进入droppable组件时触发。 onDragOver e, source 当draggable组件在droppable组件内部移动是触发。 onDragLeave e, source 当draggable组件离开droppable组件时触发。 onDrop e, source 当draggable组件被放置进droppable组件时触发。

　　这四个事件的参数都一样，e是js中的event对象，source是被放入的draggable组件的DOM。
　　onDragEnter和onDragLeave分别在draggable组件进入和离开droppable组件时触发，只触发一次。
　　onDragOver事件是在draggable组件在droppable组件内部移动时触发，每移动一下触发一次，可以通过该事件实现draggable组件在droppable组件内部坐标的实时显示。
　　onDrop则在draggable组件放入到droppable组件内触发，这个里的“放入”指在draggable组件上按下鼠标，然后把draggable组件拖入到droppable组件内部，再放开鼠标的一整个过程。

0 0