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

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

    
        
        
        
        
        
        
        
    
    
        

          

            ![](images/recy.png)
          
          

            ![](images/doc.png)
          
          

            ![](images/doc.png)
          
      
    
    

下面分别是拖入前和拖入后的效果图。
　　

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组件内部，再放开鼠标的一整个过程。