详解有关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 轻松支持函数重载 (Part 1 - 设计)
Aug 04 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
Jan 25 Javascript
jQuery基本选择器选择元素使用介绍
Apr 18 Javascript
使用PHP+JQuery+Ajax分页的实现
Apr 23 Javascript
js实现checkbox全选、不选与反选的方法
Feb 09 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
Apr 27 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
May 12 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
Jun 22 Javascript
简单的vue-resourse获取json并应用到模板示例
Feb 10 Javascript
基于react组件之间的参数传递(详解)
Sep 05 Javascript
Vue 全家桶实现移动端酷狗音乐功能
Nov 16 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
Oct 29 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中GET变量的使用
2006/10/09 PHP
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
详解php设置session(过期、失效、有效期)
2015/11/12 PHP
php阳历转农历优化版
2016/08/08 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
PHP 二维array转换json的实例讲解
2018/08/21 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
js导出txt示例代码
2014/01/14 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
学做Bootstrap的第一个页面
2016/05/15 HTML / CSS
深入浅析JavaScript中的Function类型
2016/07/09 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
AngularJS 控制器 controller的详解
2017/10/17 Javascript
vue 插值 v-once,v-text, v-html详解
2018/01/19 Javascript
Vue组件通信的四种方式汇总
2018/02/08 Javascript
JS解析后台返回的JSON格式数据实例
2018/08/06 Javascript
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
基于原生js实现判断元素是否有指定class名
2020/07/11 Javascript
python每次处理固定个数的字符的方法总结
2013/01/29 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
Python 删除连续出现的指定字符的实例
2018/06/29 Python
python实现键盘输入的实操方法
2019/07/16 Python
Python字符串hashlib加密模块使用案例
2020/03/10 Python
mac 上配置Pycharm连接远程服务器并实现使用远程服务器Python解释器的方法
2020/03/19 Python
印度在线杂货店:bigbasket
2018/08/23 全球购物
资产评估专业大学生求职信
2013/09/29 职场文书
企业管理毕业生求职信范文
2014/03/07 职场文书
校园演讲稿汇总
2014/05/21 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
开展批评与自我批评心得体会
2014/10/17 职场文书
2014年人事部工作总结
2014/12/03 职场文书
小学英语复习计划
2015/01/19 职场文书
初二物理教学反思
2016/02/19 职场文书
mysql幻读详解实例以及解决办法
2022/06/16 MySQL