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">
</div>
<div id="doc1" class="easyui-draggable">
</div>
<div id="doc2" class="easyui-draggable">
</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组件内部，再放开鼠标的一整个过程。
网友评论