easyui Droppable组件实现放置特效

前端之家收集整理的这篇文章主要介绍了easyui Droppable组件实现放置特效前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

  Droppable的加载方式

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

代码如下:
Box,#pox'">

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

获取DOM元素 }

  Droppable 方法列表

  1,options 返回属性对象

Box').droppable('options'));

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

Box').droppable('enable/disable')

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

<Meta charset="UTF-8"> Accept a Drop - jQuery EasyUI Demo

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

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

easyui 1.3.5 Droppable 就此完结。

原文链接:https://www.f2er.com/js/52850.html

猜你在找的JavaScript相关文章