详解有关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 相关文章推荐
jquery库或JS文件在eclipse下报错问题解决方法
Apr 17 Javascript
通过Jquery的Ajax方法读取将table转换为Json
May 31 Javascript
js实现屏幕自适应局部代码分享
Jan 30 Javascript
JS上传组件FileUpload自定义模板的使用方法
May 10 Javascript
利用node.js本地搭建HTTP服务器
Apr 19 Javascript
详解angularjs获取元素以及angular.element()用法
Jul 25 Javascript
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
js导出Excel表格超出26位英文字符的解决方法ES6
Nov 15 Javascript
vue router 配置路由的方法
Jul 26 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
May 15 Javascript
JS 4个超级实用的小技巧 提升开发效率
Oct 05 Javascript
vue实现列表垂直无缝滚动
Apr 08 Vue.js
利用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 MemCached 高级缓存应用代码
2010/08/05 PHP
php下通过curl抓取yahoo boss 搜索结果的实现代码
2011/06/10 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
json跟xml的对比分析
2008/06/10 Javascript
JavaScript Array扩展实现代码
2009/10/14 Javascript
js用闭包遍历树状数组的方法
2014/03/19 Javascript
jquery操作select方法汇总
2015/02/05 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
跟我学习javascript的严格模式
2015/11/16 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
微信小程序 教程之模块化
2016/10/17 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
JS中Safari浏览器中的Date
2017/07/17 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
2017/09/12 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
2017/12/26 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
vue添加axios,并且指定baseurl的方法
2018/09/19 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
2018/09/21 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
vue页面加载时的进度条功能(实例代码)
2020/01/13 Javascript
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
pyqt远程批量执行Linux命令程序的方法
2019/02/14 Python
Pycharm安装python库的方法
2020/11/24 Python
英国轻奢珠宝品牌:Astley Clarke
2016/12/18 全球购物
欧洲最大的球衣网上商店:Kitbag
2017/11/11 全球购物
售后服务承诺书范文
2014/03/26 职场文书
环保建议书400字
2014/05/14 职场文书
授权委托书
2014/07/31 职场文书
高中课前三分钟演讲稿
2014/08/18 职场文书
ktv周年庆活动方案
2014/08/18 职场文书
SQL模糊查询报:ORA-00909:参数个数无效问题的解决
2021/06/21 Oracle
PostgreSQL解析URL的方法
2021/08/02 PostgreSQL
Mysql 8.x 创建用户以及授予权限的操作记录
2022/04/18 MySQL