easyUI的拖动操作中droppable，draggable用法实例-js教程-PHP中文网

首页

web前端

js教程

easyUI的拖动操作中droppable，draggable用法实例

小云云

Jan 10, 2018 am 10:42 AM

easyui

本文主要介绍了有关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>
  <p 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>
   <p class="target">
     <p class="target-cascade">
      <span>级联统计指标</span>
      <ul>
      </ul>
     </p>
     <p class="target-column">
      <span>列指标</span>
      <ul>
      </ul>
     </p>
   </p>
  </p>
  <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 = [];
$(&#39;.items li&#39;).draggable({
  proxy: &#39;clone&#39;,
  revert: true
});
// 级联统计指标放置区
$(&#39;.target-cascade&#39;).droppable({
  onDragEnter: function(e,source){
   $(this).css(&#39;border&#39;,&#39;1px solid red&#39;);
  },
  onDragLeave: function(e,source){
   $(this).css(&#39;border&#39;,&#39;1px solid black&#39;);
  },
  onDrop: function(e,source){
   // 判断拖动的元素是否存在于放置区内
   if($(source).draggable(&#39;options&#39;).proxy === &#39;clone&#39;){
     // 禁用拖动
     NotDrag(source);
     // 将拖入元素的原位置记录下来
     var buttonName = $(source).find(&#39;span&#39;).html();
     console.log("--------"+$(source).index());
     tab[buttonName] = $(source).index();//返回指定元素相对于其他元素的位置（0,1等）,如果没有找到，则返回-1
     var Ele = $(&#39;<li class=&#39;+ $(source)[0].className +&#39;><button>&#39;+ buttonName +&#39;</button></li>&#39;);
     Ele.appendTo(&#39;.target-cascade ul&#39;);
   }
   $(this).css(&#39;border&#39;,&#39;1px solid black&#39;);

   // 拖动放置区内的元素
   $(this).find(&#39;button&#39;).draggable({
     revert: true,
     onStopDrag: function(e){
      var _index = tab[$(this).html()];
      $(this).parent().remove();
      $(&#39;.items li:eq(&#39;+_index+&#39;)&#39;).draggable(&#39;enable&#39;);
      $(&#39;.items li:eq(&#39;+_index+&#39;)&#39;).find(&#39;i&#39;).css(&#39;backgroundColor&#39;,&#39;red&#39;);
     }
   });
  }
});
// 列指标放置区
$(&#39;.target-column&#39;).droppable({
  onDragEnter: function(e,source){
   $(this).css(&#39;border&#39;,&#39;1px solid red&#39;); 
  },
  onDragLeave: function(e,source){
   $(this).css(&#39;border&#39;,&#39;1px solid black&#39;);
  },
  onDrop: function(e,source){
   // 判断拖动的元素是否存在于放置区内
   if($(source).draggable(&#39;options&#39;).proxy === &#39;clone&#39;){
     // 禁用拖动
     NotDrag(source);
     var buttonName = $(source).find(&#39;span&#39;).html();
     tab[buttonName] = $(source).index();
     var Ele = $(&#39;<li class=&#39;+ $(source)[0].className +&#39;><button>&#39;+ buttonName +&#39;</button><select><option value ="show">显示</option>&#39;+
      &#39;<option value ="sum">求和</option><option value ="count">计数</option></select></li>&#39;);
     Ele.appendTo(&#39;.target-column ul&#39;);
   }
   $(this).css(&#39;border&#39;,&#39;1px solid black&#39;);
   // 拖动放置区内的元素
   $(this).find(&#39;button&#39;).draggable({
     revert: true,
     onDrag: function(e){
      $(e.data.parent).find(&#39;select&#39;).hide();
     },
     onStopDrag: function(e){
      var _index = tab[$(this).html()];
      $(this).parent().remove();
      $(&#39;.items li:eq(&#39;+_index+&#39;)&#39;).draggable(&#39;enable&#39;);
      $(&#39;.items li:eq(&#39;+_index+&#39;)&#39;).find(&#39;i&#39;).css(&#39;backgroundColor&#39;,&#39;red&#39;);

      $(e.target).siblings(&#39;select&#39;).show();
     }
   });
  }
});
//禁止拖动
function NotDrag(source){
  $(source).draggable(&#39;disable&#39;);//禁用拖动动作
  $(source).find(&#39;i&#39;).css(&#39;backgroundColor&#39;,&#39;grey&#39;);
}

登录后复制

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7563

CakePHP 教程

1384

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

前端热敏纸小票打印遇到乱码问题怎么办？ Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中，小票打印是一个常见的需求。然而，很多开发者在实...

谁得到更多的Python或JavaScript？ Apr 04, 2025 am 12:09 AM

Python和JavaScript开发者的薪资没有绝对的高低，具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大，薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

如何使用JavaScript将具有相同ID的数组元素合并到一个对象中？ Apr 04, 2025 pm 05:09 PM

如何在JavaScript中将具有相同ID的数组元素合并到一个对象中？在处理数据时，我们常常会遇到需要将具有相同ID�...

神秘的JavaScript：它的作用以及为什么重要 Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。

console.log输出结果差异：两次调用为何不同？ Apr 04, 2025 pm 05:12 PM

深入探讨console.log输出差异的根源本文将分析一段代码中console.log函数输出结果的差异，并解释其背后的原因。�...

初学者的打字稿，第2部分：基本数据类型 Mar 19, 2025 am 09:10 AM

掌握了入门级TypeScript教程后，您应该能够在支持TypeScript的IDE中编写自己的代码，并将其编译成JavaScript。本教程将深入探讨TypeScript中各种数据类型。 JavaScript拥有七种数据类型：Null、Undefined、Boolean、Number、String、Symbol（ES6引入）和Object。TypeScript在此基础上定义了更多类型，本教程将详细介绍所有这些类型。 Null数据类型与JavaScript一样，TypeScript中的null

如何实现视差滚动和元素动画效果，像资生堂官网那样？或者：怎样才能像资生堂官网一样，实现页面滚动伴随的动画效果？ Apr 04, 2025 pm 05:36 PM

实现视差滚动和元素动画效果的探讨本文将探讨如何实现类似资生堂官网（https://www.shiseido.co.jp/sb/wonderland/）中�...

PowerPoint可以运行JavaScript吗？ Apr 01, 2025 pm 05:17 PM

在PowerPoint中可以运行JavaScript，通过VBA调用外部JavaScript文件或嵌入HTML文件来实现。1.使用VBA调用JavaScript文件，需启用宏并具备VBA编程知识。2.嵌入包含JavaScript的HTML文件，简单易行但受安全限制。优点包括扩展功能和灵活性，劣势涉及安全性、兼容性和复杂性，实际应用需注意安全性、兼容性、性能和用户体验。

See all articles

easyUI的拖动操作中droppable，draggable用法实例

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题