详解有关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 Scoping and Hoisting 翻译
Jul 03 Javascript
jquery动态分页效果堪比时光网
Sep 25 Javascript
AngularJS中的包含详细介绍及实现示例
Jul 28 Javascript
jQuery实现可展开折叠的导航效果示例
Sep 12 Javascript
TypeScript入门-接口
Mar 30 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
May 08 Javascript
Easyui在treegrid添加控件的实现方法
Jun 23 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
JavaScript遍历数组和对象的元素简单操作示例
Jul 09 Javascript
微信小程序canvas分享海报功能
Oct 31 Javascript
javascript如何实现create方法
Nov 04 Javascript
vue 实现根据data中的属性值来设置不同的样式
Aug 04 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中的 == 运算符进行字符串比较
2006/11/26 PHP
PHP定时自动生成静态HTML的实现代码
2010/06/20 PHP
PHP求最大子序列和的算法实现
2011/06/24 PHP
thinkphp浏览历史功能实现方法
2014/10/29 PHP
php在数组中查找指定值的方法
2015/03/17 PHP
IE与Firefox下javascript getyear年份的兼容性写法
2007/12/20 Javascript
前台js改变Session的值(用ajax实现)
2012/12/28 Javascript
JQuery动画和停止动画实例代码
2013/03/01 Javascript
关于js遍历表格的实例
2013/07/10 Javascript
简介JavaScript中toTimeString()方法的使用
2015/06/12 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
2015/07/29 Javascript
在localStorage中存储对象数组并读取的方法
2016/09/24 Javascript
利用C/C++编写node.js原生模块的方法教程
2017/07/07 Javascript
基于Vue实现图书管理功能
2017/10/17 Javascript
微信小程序实现左右列表联动
2020/05/19 Javascript
JQuery发送ajax请求时中文乱码问题解决
2019/11/14 jQuery
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
[01:00:12]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第一场
2018/04/09 DOTA
Django与JS交互的示例代码
2017/08/23 Python
Python 实现选择排序的算法步骤
2018/04/22 Python
python文件拆分与重组实例
2018/12/10 Python
Python数据可视化之画图
2019/01/15 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
Keras之自定义损失(loss)函数用法说明
2020/06/10 Python
Python celery原理及运行流程解析
2020/06/13 Python
增大python字体的方法步骤
2020/07/05 Python
Belle Maison倍美丛官网:日本千趣会旗下邮购网站
2016/07/22 全球购物
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
诺思信科技(南京)有限公司.NET笔试题答案
2013/07/06 面试题
2014小学教师个人工作总结
2014/11/10 职场文书
员工辞职信范文大全
2015/05/12 职场文书
幼儿园小班教学反思
2016/03/03 职场文书
分享:关于学习的励志名言赏析
2019/08/16 职场文书
MySQL系列之十五 MySQL常用配置和性能压力测试
2021/07/02 MySQL
《吸血鬼:避世 血猎》官宣4.27发售 系列首款大逃杀
2022/04/03 其他游戏
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers