easyui Droppable组件实现放置特效

所谓放置，就是将一个物体放入一个物体内，当然对于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')

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

 
 
 
 
 
 
 


 
 
  drag me!
  Drag 1
  Drag 2
  Drag 3
  
 
  drop here!
 
 
 
  .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;
  }
 
 
 

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

          效果地址: http://www.jeasyui.com/demo/main/index.php?plugin=Droppable&theme=default&dir=ltr&pitem=

easyui 1.3.5 Droppable 就此完结。