详解有关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
JavaScript地图拖动功能SpryMap的简单实现
Jul 17 Javascript
jQuery中的read和JavaScript中的onload函数的区别
Aug 27 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
Nov 13 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
May 09 Javascript
AngularJS 表达式详细讲解及实例代码
Jul 26 Javascript
jsp 网站引入外部css或者js失效问题解决
Oct 31 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
Aug 16 Javascript
JavaScript登录验证基础教程
Nov 01 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 Javascript
微信小程序接入腾讯云验证码的方法步骤
Jan 07 Javascript
javascript实现倒计时效果
Feb 17 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与MySQL交互使用详解
2006/10/09 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
获取服务器传来的数据 用JS去空格的正则表达式
2012/03/26 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
Position属性之relative用法
2015/12/14 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
2016/08/16 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
详解Vue中watch的高级用法
2018/05/02 Javascript
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
一文了解Vue中的nextTick
2019/05/06 Javascript
mock.js模拟前后台交互
2019/07/25 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
2019/11/04 Javascript
JS猜数字游戏实例讲解
2020/06/30 Javascript
design vue 表格开启列排序的操作
2020/10/28 Javascript
Python模块包中__init__.py文件功能分析
2016/06/14 Python
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
简单实现python画圆功能
2018/01/25 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
基于python历史天气采集的分析
2019/02/14 Python
Python日志处理模块logging用法解析
2020/05/19 Python
Python 执行矩阵与线性代数运算
2020/08/01 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
ubuntu16.04升级Python3.5到Python3.7的方法步骤
2020/08/20 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
浅谈CSS3 box-sizing 属性 有趣的盒模型
2019/04/02 HTML / CSS
Reebonz中国官网:新加坡奢侈品购物网站
2017/03/17 全球购物
彪马英国官网:PUMA英国
2019/02/11 全球购物
化学专业毕业生自荐信
2013/11/15 职场文书
区域总监的岗位职责
2013/11/21 职场文书
科学发展观标语
2014/10/08 职场文书
外贸业务员岗位职责
2015/02/13 职场文书
同学会感言
2015/07/30 职场文书
浅谈Python 中的复数问题
2021/05/19 Python
详解使用内网穿透工具Ngrok代理本地服务
2022/03/31 Servers
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js