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

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">
            ![](images/recy.png)
          </div>
          <div id="doc1" class="easyui-draggable">
            ![](images/doc.png)
          </div>
          <div id="doc2" class="easyui-draggable">
            ![](images/doc.png)
          </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组件内部，再放开鼠标的一整个过程。

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

推荐阅读更多精彩内容