详解有关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 相关文章推荐
禁止刷新,回退的JS
Nov 25 Javascript
JS 删除字符串最后一个字符的实现代码
Feb 20 Javascript
使用mini-define实现前端代码的模块化管理
Dec 25 Javascript
javascript实用方法总结
Feb 06 Javascript
一篇文章掌握RequireJS常用知识
Jan 26 Javascript
Angularjs CURD 详解及实例代码
Sep 14 Javascript
深究AngularJS中$sce的使用
Jun 12 Javascript
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
Vue 中使用vue2-highcharts实现曲线数据展示的方法
Mar 05 Javascript
vue生成文件本地打开查看效果的实例
Sep 06 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
Jan 31 Javascript
小程序实现图片预览裁剪插件
Nov 22 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 验证码实例代码
2010/06/01 PHP
ThinkPHP之foreach标签使用概述
2014/06/30 PHP
PHP 快速排序算法详解
2014/11/10 PHP
php使用CutyCapt实现网页截图保存的方法
2016/10/03 PHP
一个加密JavaScript的开源工具PACKER2.0.2
2006/11/04 Javascript
NodeJS与Mysql的交互示例代码
2013/08/18 NodeJs
PHP结合jQuery实现红蓝投票功能特效
2015/07/22 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
JQuery导航菜单选择特效
2016/04/11 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
XMLHttpRequest Level 2 使用指南
2016/08/26 Javascript
setTimeout函数的神奇使用
2017/02/26 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
angularjs2中父子组件的数据传递的实例代码
2017/07/05 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
2017/07/27 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
vue select选择框数据变化监听方法
2018/08/24 Javascript
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
解决layui 三级联动下拉框更新时回显的问题
2019/09/03 Javascript
详解React 条件渲染
2020/07/08 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
2020/09/04 Javascript
[04:04]显微镜下的DOTA2第六期——电影级别的华丽团战
2014/06/20 DOTA
Python 字符串大小写转换的简单实例
2017/01/21 Python
初学python的操作难点总结(新手必看篇)
2017/08/03 Python
python分数表示方式和写法
2019/06/26 Python
python实现多线程端口扫描
2019/08/31 Python
python实现串口通信的示例代码
2020/02/10 Python
亚洲最大旅游体验平台:KKday
2017/10/21 全球购物
工艺工程师岗位职责
2014/03/04 职场文书
租房协议书范本
2014/04/09 职场文书
土地转让协议书范本
2014/04/15 职场文书
刑事上诉状(量刑过重)
2015/05/23 职场文书
2015国庆节宣传语
2015/07/14 职场文书
婚礼男方父母答谢词
2015/09/29 职场文书
python数据分析之用sklearn预测糖尿病
2021/04/22 Python
纯html+css实现奥运五环的示例代码
2021/08/02 HTML / CSS