详解有关easyUI的拖动操作中droppable,draggable用法例子


Posted in Javascript onJune 03, 2017

这个demo展示的效果为:从上面可以拖动到下面相应的框中(原有的不能再拖动),拖动框中的东西到外面可以取消

-----------以下为HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" type="text/css" href="css/bootstrap-3.3.5/css/bootstrap.min.css" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="css/easyui.css" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="css/icon.css" rel="external nofollow" >
  <link rel="stylesheet" href="css/demo.css" rel="external nofollow" >
</head>
<body>
  <div class="container">
   <ul class="items">
     <li class="category">
      <i></i>
      <span>品类</span>
     </li>
     <li class="factory">
      <i></i>
      <span>工厂</span>
     </li>
     <li class="with-high">
      <i></i>
      <span>跟高</span>
     </li>
     <li class="with-type">
      <i></i>
      <span>跟型</span>
     </li>
     <li class="price">
      <i></i>
      <span>单价</span>
     </li>
   </ul>
   <div class="target">
     <div class="target-cascade">
      <span>级联统计指标</span>
      <ul>
      </ul>
     </div>
     <div class="target-column">
      <span>列指标</span>
      <ul>
      </ul>
     </div>
   </div>
  </div>
  <script src="js/jquery.js"></script>
  <script src="js/jquery.easyui.min.js"></script>
  <script src="js/demo.js"></script>
</body>
</html>

-------------以下为js代码

var tab = [];
$('.items li').draggable({
  proxy: 'clone',
  revert: true
});
// 级联统计指标放置区
$('.target-cascade').droppable({
  onDragEnter: function(e,source){
   $(this).css('border','1px solid red');
  },
  onDragLeave: function(e,source){
   $(this).css('border','1px solid black');
  },
  onDrop: function(e,source){
   // 判断拖动的元素是否存在于放置区内
   if($(source).draggable('options').proxy === 'clone'){
     // 禁用拖动
     NotDrag(source);
     // 将拖入元素的原位置记录下来
     var buttonName = $(source).find('span').html();
     console.log("--------"+$(source).index());
     tab[buttonName] = $(source).index();//返回指定元素相对于其他元素的位置(0,1等),如果没有找到,则返回-1
     var Ele = $('<li class='+ $(source)[0].className +'><button>'+ buttonName +'</button></li>');
     Ele.appendTo('.target-cascade ul');
   }
   $(this).css('border','1px solid black');

   // 拖动放置区内的元素
   $(this).find('button').draggable({
     revert: true,
     onStopDrag: function(e){
      var _index = tab[$(this).html()];
      $(this).parent().remove();
      $('.items li:eq('+_index+')').draggable('enable');
      $('.items li:eq('+_index+')').find('i').css('backgroundColor','red');
     }
   });
  }
});
// 列指标放置区
$('.target-column').droppable({
  onDragEnter: function(e,source){
   $(this).css('border','1px solid red'); 
  },
  onDragLeave: function(e,source){
   $(this).css('border','1px solid black');
  },
  onDrop: function(e,source){
   // 判断拖动的元素是否存在于放置区内
   if($(source).draggable('options').proxy === 'clone'){
     // 禁用拖动
     NotDrag(source);
     var buttonName = $(source).find('span').html();
     tab[buttonName] = $(source).index();
     var Ele = $('<li class='+ $(source)[0].className +'><button>'+ buttonName +'</button><select><option value ="show">显示</option>'+
      '<option value ="sum">求和</option><option value ="count">计数</option></select></li>');
     Ele.appendTo('.target-column ul');
   }
   $(this).css('border','1px solid black');
   // 拖动放置区内的元素
   $(this).find('button').draggable({
     revert: true,
     onDrag: function(e){
      $(e.data.parent).find('select').hide();
     },
     onStopDrag: function(e){
      var _index = tab[$(this).html()];
      $(this).parent().remove();
      $('.items li:eq('+_index+')').draggable('enable');
      $('.items li:eq('+_index+')').find('i').css('backgroundColor','red');

      $(e.target).siblings('select').show();
     }
   });
  }
});
//禁止拖动
function NotDrag(source){
  $(source).draggable('disable');//禁用拖动动作
  $(source).find('i').css('backgroundColor','grey');
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript获得选中文本内容的方法
Dec 02 Javascript
js图片延迟加载的实现方法及思路
Jul 22 Javascript
用Js实现的动态增加表格示例自己写的
Oct 21 Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
jquery获取input type=text中的值的各种方式(总结)
Dec 02 Javascript
javascript 闭包详解及简单实例应用
Dec 31 Javascript
JavaScript实现三级联动效果
Jul 15 Javascript
微信小程序tabBar底部导航中文注解api详解
Aug 16 Javascript
用Node编写RESTful API接口的示例代码
Jul 04 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
Jan 08 Javascript
利用vueJs实现图片轮播实例代码
Jun 03 #Javascript
angular中使用Socket.io实例代码
Jun 03 #Javascript
jquery请求servlet实现ajax异步请求的示例
Jun 03 #jQuery
深入理解Node中的buffer模块
Jun 03 #Javascript
MvcPager分页控件 适用于Bootstrap
Jun 03 #Javascript
全面解析Node.js 8 重要功能和修复
Jun 02 #Javascript
vue 中自定义指令改变data中的值
Jun 02 #Javascript
You might like
php中AES加密解密的例子小结
2014/02/18 PHP
PHP四大安全策略
2014/03/12 PHP
Thinkphp调用Image类生成缩略图的方法
2015/03/07 PHP
PHP接收json 并将接收数据插入数据库的实现代码
2015/12/01 PHP
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
基于PHP实现微信小程序客服消息功能
2019/08/12 PHP
js option删除代码集合
2008/11/12 Javascript
jquery 可拖拽的窗体控件实现代码
2010/03/21 Javascript
jQuery.event兼容各浏览器的event详细解析
2013/12/18 Javascript
javascript实现json页面分页实例代码
2014/02/20 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
2015/08/10 Javascript
JS实现的跨浏览器解析XML文件实例
2016/06/21 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
利用纯JS实现像素逐渐显示的方法示例
2017/08/14 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
JavaScript实现省市联动过程中bug的解决方法
2017/12/04 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
微信小程序云函数添加数据到数据库的方法
2020/03/04 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python判断windows系统是32位还是64位的方法
2015/05/11 Python
Python获取央视节目单的实现代码
2015/07/25 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
python数据预处理之数据标准化的几种处理方式
2019/07/17 Python
分享一个python的aes加密代码
2020/12/22 Python
CSS3 box-sizing属性
2009/04/17 HTML / CSS
如何实现一个自定义类的序列化
2012/05/22 面试题
广州盈通面试题
2015/12/05 面试题
婚假请假条怎么写
2014/04/10 职场文书
师范生见习自我总结
2015/06/23 职场文书
基于Pygame实现简单的贪吃蛇游戏
2021/12/06 Python