研究EasyUI系统—Droppable组件

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

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

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

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

　　droppable组件事件：

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