easyui Droppable组件实现放置特效


Posted in Javascript onAugust 19, 2015

所谓放置,就是将一个物体放入一个物体内,当然对于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="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 就此完结。

Javascript 相关文章推荐
比较全面的event对像在IE与FF中的区别 推荐
Sep 21 Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
Mar 15 Javascript
使用 Node.js 做 Function Test实现方法
Oct 25 Javascript
Js可拖拽放大的层拖动特效实现方法
Feb 25 Javascript
jQuery调用ajax请求的常见方法汇总
Mar 24 Javascript
RequireJS入门一之实现第一个例子
Sep 30 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
Apr 18 Javascript
vue如何引用其他组件(css和js)
Apr 13 Javascript
js技巧之十几行的代码实现vue.watch代码
Jun 09 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
Jan 31 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
深入理解 TypeScript Reflect Metadata
Dec 12 Javascript
js实现简单的联动菜单效果
Aug 19 #Javascript
javascript 使用for循环时该注意的问题-附问题总结
Aug 19 #Javascript
jQuery满意度星级评价插件特效代码分享
Aug 19 #Javascript
easyui Draggable组件实现拖动效果
Aug 19 #Javascript
使用CamanJS在Web页面上处理图像的技巧
Aug 18 #Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 #Javascript
JS实现可调整倒计时间代码分享
Aug 18 #Javascript
You might like
PHP自动识别字符集并完成转码详解
2013/08/02 PHP
PHP页面中文乱码分析
2013/10/29 PHP
php三元运算符知识汇总
2015/07/02 PHP
浅析PHP开发规范
2018/02/05 PHP
JQuery的ajax基础上的超强GridView展示
2009/09/18 Javascript
jQuery函数的等价原生函数代码示例
2013/05/27 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
2013/11/05 Javascript
查看大图功能代码jquery版
2013/11/05 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
2016/08/02 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
2016/10/10 Javascript
微信小程序 开发之全局配置
2017/05/05 Javascript
详解使用Node.js 将txt文件转为Excel文件
2017/07/05 Javascript
vue项目打包后打开页面空白解决办法
2018/06/29 Javascript
在Vue methods中调用filters里的过滤器实例
2018/08/30 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
2018/09/29 Javascript
koa+mongoose实现简单增删改查接口的示例代码
2019/05/13 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
图解NodeJS实现登录注册功能
2019/09/16 NodeJs
浅析vue-router中params和query的区别
2019/12/24 Javascript
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Python 访问限制 private public的详细介绍
2018/10/16 Python
Python如何实现转换URL详解
2019/07/02 Python
Pandas 重塑(stack)和轴向旋转(pivot)的实现
2019/07/22 Python
Python ORM框架Peewee用法详解
2020/04/29 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
介绍一下Python下range()函数的用法
2013/11/07 面试题
车间班组长岗位职责
2013/11/13 职场文书
养殖人员的创业计划书范文
2013/12/26 职场文书
物业工作计划书
2014/01/10 职场文书
市三好学生主要事迹
2014/01/28 职场文书
工程造价专业求职信
2014/07/17 职场文书
MySQL快速插入一亿测试数据
2021/06/23 MySQL
一文带你探究MySQL中的NULL
2021/11/11 MySQL