详解有关easyUI的拖动操作中droppable，draggable用法例子

这个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');
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQuery EasyUI NumberBox(数字框)的用法

    这里的options是选项,可以参考下表: 选项名 类型 描述 默认值 min 数字 文本框中可允许的最小值 null max 数字 文本框中可允许的最大值 null precision 数字 最高可精确到小数点后几位 0 例如:金额输入框 最大值为"99999.99" 精确到两位小数. <input name="money" id="money" type="text" class="easyui-numbe

  • jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法

    jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法

    先给大家分享数据校验显示效果 Web前端数据校验组件 Web项目中客户端与服务端的交互离不开Form表单,Form表单中最常用的元素莫过于input标签,input标签首先要用的肯定是text文本框啦! input文本框允许用户任意输入,难免会会有用户输入一些不符合规定的数据,此时,在提交之前对数据校验是很有必要的,如果等到提交到服务端再校验就会大大降低用户体验啦. 前端校验有很多现成的组件,比较好用的有 EasyUI 的 validatebox 插件,提示界面做的相当友好,只是validate

  • EasyUI中的tree用法介绍

    真的是太忙了,本应该有好多东西可以写,但是没什么闲时间,每次想到写的时候,来点事就又给忘了.10月最后一天了,在忙也得把这篇文章写完,不然又得多一个空白月了. 这是之前带领成员开发一个小模块功能的时候,需要用到弹出窗口加载树状级联单位选择,最后决定用采用jQuery+EasyUI插件进行开发.但是在使用EasyUI中tree的插件时,碰到了不少麻烦.为了提供弹出树的显示速度,就采用异步加载数节点值,首先先加载根节点,然后根据点击的节点展开加载子节点. 往往结果和预期的都不一样,困惑了几天,展开后

  • jquery easyui中treegrid用法的简单实例

    jquery easyui中treegrid用法的简单实例

    项目需求如下图,在服务端返回的json数据中,要经过JS处理,添加复选框,并且复选框需响应JS操作.在easyui 的treegrid中,没有找到现成的插件,自己需要修改整理,代码如下 复制代码 代码如下: <table class="easyui-treegrid" style="width:700px;height:250px"  url='control_node_json?group_id=$info[id]&access_node=$_REQ

  • 简述jQuery Easyui一些用法

    1.form里的一些控件如textbox.combobox等添加额外的一些事件,如鼠标事件(mouseover.click等),键盘事件(keydown.keyup等),都可以用2中方式实现,以textbox为例  方法一:on方法 $("#tt").textbox('textbox').click(function(){ console.info(123); });//注意这里必须的.textbox('textbox')  easyui自带的inputEvents方法 $("

  • easyui的tabs update正确用法分享

    一直以为 tabs update 是 easyui 的 bug,最近在用的时候发现可以这样解决 复制代码 代码如下: function updateTab(url){ var tab = $('#tt').tabs('getSelected'); $("#tt").tabs('update',{        tab: tab,        options:{ href: url        }    });    tab.panel('refresh'); }

  • 详解有关easyUI的拖动操作中droppable，draggable用法例子

    这个demo展示的效果为:从上面可以拖动到下面相应的框中(原有的不能再拖动),拖动框中的东西到外面可以取消 -----------以下为HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>&l

  • 详解Hibernate cascade级联属性的CascadeType的用法

    详解Hibernate cascade级联属性的CascadeType的用法 cascade(级联) 级联在编写触发器时经常用到,触发器的作用是当 主控表信息改变时,用来保证其关联表中数据同步更新.若对触发器来修改或删除关联表相记录,必须要删除对应的关联表信息,否则,会存有脏数据.所以,适当的做法是,删除主表的同时,关联表的信息也要同时删除,在hibernate中,只需设置cascade属性值即可. cascade表示级联操作,在hibernate配置注解@OneToOne,@OneToMany

  • 详解基于IDEA2020.1的JAVA代码提示插件开发例子

    之前因为项目组有自己的代码规范,为了约束平时的开发规范,于是基于2019.1.3版本开发了一个代码提示的插件.但是在把IDEA切换到2020.1版本的时候,却发现疯狂报错,但是网上关于IDEA插件开发的相关文章还是不够多,只能自己解决.于是根据官方的SDK文档,使用Gradle重新构建了一下项目,把代码拉了过来.下文会根据2020.1版本简单开发一个代码异常的提示插件,把容易踩坑的地方提示一下. 1.首先先根据IDEA插件开发官方文档,用Gradle新建一个project 选中file -> n

  • 详解Python中list[::-1]的几种用法

    本文主要介绍了Python中list[::-1]的几种用法,分享给大家,具体如下: s = "abcde" list的[]中有三个参数,用冒号分割 list[param1:param2:param3] param1,相当于start_index,可以为空,默认是0 param2,相当于end_index,可以为空,默认是list.size param3,步长,默认为1.步长为-1时,返回倒序原序列 举例说明 param1 = -1,只有一个参数,作用是通过下标访问数据,-1为倒数第一个

  • 详解SpringBoot启动类的扫描注解的用法及冲突原则

    详解SpringBoot启动类的扫描注解的用法及冲突原则

    背景 SpringBoot 启动类上,配置扫描包路径有三种方式,最近看到一个应用上三种注解都用上了,代码如下: @SpringBootApplication(scanBasePackages ={"a","b"}) @ComponentScan(basePackages = {"a","b","c"}) @MapperScan({"XXX"}) public class XXApplic

  • 详解C++语言中std::array的神奇用法

    概述 std::array是在C++11标准中增加的STL容器,它的设计目的是提供与原生数组类似的功能与性能.也正因此,使得std::array有很多与其他容器不同的特殊之处,比如:std::array的元素是直接存放在实例内部,而不是在堆上分配空间:std::array的大小必须在编译期确定:std::array的构造函数.析构函数和赋值操作符都是编译器隐式声明的--这让很多用惯了std::vector这类容器的程序员不习惯,觉得std::array不好用.但实际上,std::array的威力

  • C语言详解关键字sizeof与unsigned及signed的用法

    C语言详解关键字sizeof与unsigned及signed的用法

    目录 最冤枉的关键字sizeof理解 被误解为函数 sizeof(int)*p 表示什么意思 signed与unsigned 关键字 有符号整数vs无符号整数 整形在内存的存储 原码 反码 补码 存储的本质 十进制二进制快速转化 为什么存储的是补码 大小端 最冤枉的关键字sizeof理解 sizeof:确定一种类型在开辟空间的时候的大小. 被误解为函数 sizeof是关键字而不是函数,可以借助编译器来确定它的身份. #include<stdio.h> int main() { int a =

  • 详解C语言中typedef和#define的用法与区别

    详解C语言中typedef和#define的用法与区别

    目录 一.typedef的用法 二.#define的用法 三.typedef与#define的区别 四.typedef的用途 用途一 用途二 用途三 用途四 五.typedef的陷阱 陷阱一 陷阱二 一.typedef的用法 在C/C++语言中,typedef常用来定义一个标识符及关键字的别名,它是语言编译过程的一部分,但它并不实际分配内存空间,比如: typedef int INT; typedef (int*) pINT; typedef unsigned int uint32_t type

  • 详解C语言中结构体(struct)的用法

    详解C语言中结构体(struct)的用法

    目录 粉丝问答 三种结构体类型变量说明 1. 先定义结构,再定义结构变量 2. 定义结构体类型的同时说明变量 3. 直接说明结构变量 结构体成员表示方法 结构体指针做参数 结构体初始化 定义变量的同时初始化 先定义在初始化 常用初始化 typedef与struct 前置声明 结构体对齐 粉丝问答 有个粉丝在群里问了这样一个问题,问题在图中已经标出,如下图. DQuestsion 头文件的结构体的定义为: typedef struct{ u8 bmRequestType; u8 bRequest;

  • 详解Android TableLayout中stretchColumns、shrinkColumns的用法

    详解Android TableLayout中stretchColumns、shrinkColumns的用法

    详解Android 中TableLayout中stretchColumns.shrinkColumns的用法 android:stretchColumns="1" android:shrinkColumns="1"这两个属性是TableLayout所特有的,也是这两个属性影响了子对象的布局. 表格布局是按照行列来组织子视图的布局.表格布局包含一系列的Tabrow对象,用于定义行(也可以使用其它子对象).表格布局不为它的行.列和单元格显示表格线.每个行可以包含个以上(

随机推荐