相思资源网 Design By www.200059.com

所谓放置,就是将一个物体放入一个物体内,当然对于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="/UploadFiles/2021-04-02/jquery.min.js">

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

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

easyui 1.3.5 Droppable 就此完结。

标签:
easyui,Droppable

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“easyui Droppable组件实现放置特效”

暂无easyui Droppable组件实现放置特效的评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。