你的位置:首页 > Java教程

[Java教程]JQuery easyui (2)Droppable(放置)组件


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

  Droppable的加载方式

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

1 <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  在被拖拽元素放入到放置区的时候触发

1 onDragEnter /onDragOver/onDragLeave/onDrop: function (e,source){2   //source 参数获取DOM元素3 }

 

  Droppable 方法列表

  1,options 返回属性对象

console.log($('#box').droppable('options'));

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

$('#box').droppable('enable/disable')

 

easyui 1.3.5 Droppable 就此完结。

看PDF的时候觉得特别不对劲,原来是PDF错字了,真心坑 - -