easyui Droppable组件实现放置特效

2019-11-20 11:48:00

字体：大中小

来源：转载

供稿：网友

所谓放置，就是将一个物体放入一个物体内，当然对于easyui来说触发各种效果是必不可少的，同时这个组件也不会依赖于其他组件。

　　Droppable的加载方式

　　1,class 加载一直不太喜欢class方式的加载浪费一个位置，代码一多还看着乱七八糟的。

复制代码代码如下:

　　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 就此完结。

上一篇：js实现Form栏显示全格式时间时钟效果代码

下一篇：js实现简单的联动菜单效果