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

冷不防 2022-06-17 12:59 187阅读 0赞

这个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">
       <link rel="stylesheet" type="text/css" href="css/easyui.css">
       <link rel="stylesheet" type="text/css" href="css/icon.css">
       <link rel="stylesheet" href="css/demo.css">
    </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 条评论，187人围观）

还没有评论，来说两句吧...

相关阅读

相关 Python中有关文件的操作

Python中有关文件的操作 1.文件路径的书写 import os 这里返回的值是字符串 path = os.path.join(ro...

╰半夏微凉°/ 2024年04月17日 21:01/ 0 赞/ 78 阅读

相关 jQuery EasyUI 拖放 - 基本的拖动和放置

本教程向您展示如何使 HTML 元素可拖动，在本例中，我们将创建三个 DIV 元素然后启用他们的拖动和放置。 ![a0e28be2a834ec35a0195a8878face

「爱情、让人受尽委屈。」/ 2024年03月23日 15:06/ 0 赞/ 76 阅读

相关 EasyUI中树的基本操作

场景效果 ![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9i

朴灿烈づ我的快乐病毒、/ 2023年10月18日 20:08/ 0 赞/ 8 阅读

相关 EasyUI中拖动draggable的使用

场景 EasyUI环境搭建与入门基础语法： [https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/9

忘是亡心i/ 2023年10月18日 19:22/ 0 赞/ 144 阅读

相关 easyui tree拖动事件

如果： html: <divclass="easyui-tree"data-options="url:'tree\_data1.json',method:'get',ani

谁践踏了优雅/ 2022年07月17日 02:48/ 0 赞/ 183 阅读

相关 mysql 中change master的用法小例子

change master用法重启master库：service mysqld restart mysql> show master status; \+

太过爱你忘了你带给我的痛/ 2022年07月10日 04:07/ 0 赞/ 224 阅读

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

这个demo展示的效果为：从上面可以拖动到下面相应的框中（原有的不能再拖动），拖动框中的东西到外面可以取消 \-----------以下为HTML <!DOCTYP

冷不防/ 2022年06月17日 12:59/ 0 赞/ 188 阅读

相关 easyUI中droppable，draggable用法列子修改

在项目中要用到拖动效果，之前写了一点不够完善，今天做了一点优化，在以前的基础上可以相互拖动了，改动的地方不大，但为了不影响之前的效果，我还是重新记录一下. HTML和我之前记

港控/mmm°/ 2022年06月16日 03:44/ 0 赞/ 171 阅读

相关有关jQuery Mobile中的按钮操作

在 jQuery Mobile 中创建按钮 jQuery Mobile中的按钮可通过三种方法创建：使用 < button > 元素 < b

àì夳堔傛蜴生んèń/ 2022年02月05日 07:51/ 0 赞/ 195 阅读

相关鼠标的拖动操作

unit Unit1; interface uses Windows, Messages, SysUtils, Vari

超、凢脫俗/ 2021年11月02日 15:56/ 0 赞/ 390 阅读