easyui Droppable组件实现放置特效

所谓放置，就是将一个物体放入一个物体内，当然对于easyui来说触发各种效果是必不可少的，同时这个组件也不会依赖于其他组件。
Droppable的加载方式
1,class 加载一直不太喜欢class方式的加载浪费一个位置，代码一多还看着乱七八糟的。
复制代码代码如下:<div id="dd" class="easyui-droppable" data-options="accept:"#box,#pox""></div>

2,js 加载调用

$（"#box"）.droppable（{accept:"#pox", //将元素pox 放置在元素box中}）;

Droppable的属性
1,accept 默认为null,确定哪些元素被接受，也就是那个元素能被放置

$（"#box"）.droppable（{accept:"#pox", //将元素pox 放置在元素box中}）;

2，deisabled 默认为false 如果为true，则禁止放置

$（"#box"）.droppable（{accept:"#pox", //将元素pox 放置在元素box中disabled : true ,//禁止放置}）;

Droppable 事件列表
1,onDragEnter 在被拖拽元素到放置区域内的时候触发
2,onDragOver 在被拖拽元素经过放置区域的时候触发
3,onDragLeave 在被拖拽元素离开放置区域的时候触发
4,onDrop 在被拖拽元素放入到放置区的时候触发

 onDragEnter /onDragOver/onDragLeave/onDrop: function （e,source）{ //source 参数获取DOM元素 }

Droppable 方法列表
1，options 返回属性对象

console.log（$（"#box"）.droppable（"options"））;

2,enable,disable 和上面属性的功能是一样的分别是启用和禁止放置

$（"#box"）.droppable（"enable/disable"）

给大家展示下官方的示例吧

<！DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Accept a Drop - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/metro/easyui.css"> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/icon.css"> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/demo/demo.css"> <script type="text/javascript" src="jquery-easyui-1.3.6/jquery.min.js"></script> <script type="text/javascript" src="jquery-easyui-1.3.6/jquery.easyui.min.js"></script></head><body> <div style="margin:20px 0;"></div> <div id="source" style="border:1px solid #ccc;width:300px;height:400px;float:left;margin:5px;">drag me！<div id="d1" class="drag">Drag 1</div><div id="d2" class="drag">Drag 2</div><div id="d3" class="drag">Drag 3</div> </div><div id="target" style="border:1px solid #ccc;width:300px;height:400px;float:left;margin:5px;">drop here！ </div> <div style="clear:both"></div> <style type="text/css">.drag{ width:100px; height:50px; padding:10px; margin:5px; border:1px solid #ccc; background:#AACCFF;}.dp{ opacity:0.5; filter:alpha（opacity=50）;}.over{ background:#FBEC88;} </style> <script>/**使用js方式将元素设置为可draggable的*/$（function（）{ $（".drag"）.draggable（{proxy:"clone",revert:true,cursor:"pointer",onStartDrag:function（）{ $（this）.draggable（"options"）.cursor="not-allowed";//设置鼠标样式为不可拖动 $（this）.draggable（"proxy"）.addClass（"dp"）;//设置样式},onStopDrag:function（）{ $（this）.draggable（"options"）.cursor="auto";//设置鼠标} }）; //将容易置为droppable并且可接受元素 $（"#target"）.droppable（{accept:"#d1,#d3",onDragEnter:function（e,source）{//拖入 $（source）.draggable（"options"）.cursor="auto"; $（source）.draggable（"proxy"）.css（"border","1px solid red"）; $（this）.addClass（"over"）;},onDragLeave:function（e,source）{//脱离 $（source）.draggable（"options"）.cursor="not-allowed"; $（source）.draggable（"proxy"）.css（"border","1px solid #ccc"）; $（this）.removeClass（"over"）;},onDrop:function（e,source）{//放下 $（this）.append（source） $（this）.removeClass（"over"）; alert（"我被放下了"）;} ,//onDropOver当元素被拖出（成功放入到某个容器）的时候触发onDragOver:function（e,source）{alert（"我被拖出去了"）;//先于alert（"我被放下了"）;执行,表明其触发在onDrop之前。 } }）;}）; </script> </body></html>

运行效果图这里就不给出了,官网直接就可以查看。OVER！

效果地址: http://www.jeasyui.com/demo/main/index.php?plugin=Droppable&theme=default&dir=ltr&pitem=
easyui 1.3.5 Droppable 就此完结。