easyUI中droppable，draggable用法列子修改

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

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

HTML和我之前记录的文章一样，我就不重复了。。。

以下是js:

var targetFlag=false;//判断从框中拖出去是否拖到了另一个框 $('.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 #ddd');
            },
            onDrop: function(e,source){
                // 判断拖动的元素是否存在于放置区内 var buttonName="";
                if($(source).draggable('options').proxy === 'clone') {//判断是否是克隆元素，即判断是否是从另一个框中拖过来的元素
                    // 禁用拖动 NotDrag(source);
                    // 将拖入元素的原位置记录下来 var buttonName = $(source).find('span').html();
                }else {
                    buttonName = $(source).html();
                    targetFlag = true;
                }
                var Ele = $('<li class='+ $(source)[0].className +'><button class='+ $(source)[0].className +'>'+ buttonName +'</button></li>');
                Ele.appendTo('.target-cascade ul');
    
                $(this).css('border','1px solid #ddd');
    
                // 拖动放置区内的元素 $(this).find('button').draggable({
                    revert: true,
                    onStopDrag: function(e){
                        var _indexClass = $(this).attr("class");
                        $(this).parents("li").remove();
                        if(targetFlag==false){
                            $('.items li[class='+_indexClass+']').draggable('enable');
                            $('.items li[class='+_indexClass+']').find('i').css('backgroundColor','#FF34B3');
                        }else{
                            targetFlag=false;
                        }
                    }
                });
            }
        });
    // 列指标放置区 $('.target-column').droppable({
            onDragEnter: function(e,source){
                $(this).css('border','1px solid red');
            },
            onDragLeave: function(e,source){
                $(this).css('border','1px solid #ddd');
            },
            onDrop: function(e,source){
                // 判断拖动的元素是否存在于放置区内 var buttonName="",className="";
                if($(source).draggable('options').proxy === 'clone') {
                    // 禁用拖动 NotDrag(source);
                     buttonName = $(source).find('span').html();
                }else {
                    buttonName = $(source).html();
                    targetFlag=$(source);
                }
                className=$(source)[0].className;
                var Ele = $('<li class='+className +'><button class='+className +'>'+ buttonName +'</button><select class="'+ className +'"><option value ="show">显示</option>'+
                    '<option value ="sum">求和</option><option value ="count">计数</option></select></li>');
                Ele.appendTo('.target-column ul');
                $(this).css('border','1px solid #ddd');
                // 拖动放置区内的元素 $(this).find('button').draggable({
                    revert: true,
                    onDrag: function(e){
                        $(this).siblings('select').hide();
                    },
                    onStopDrag: function(e){
                        var _indexClass = $(this).attr("class");
                        $(this).parents("li").remove();
                        if(targetFlag==false){
                            $('.items li[class='+_indexClass+']').draggable('enable');
                            $('.items li[class='+_indexClass+']').find('i').css('backgroundColor','#FF34B3');
                        }else{
                            targetFlag=false;
                        } }
                });
            }
        });

这里有一点和之前的发生了改变，记录元素位置时这里使用了元素的class,以前使用的是相对于其他元素的index值，over!!

发表评论取消回复

表情：

评论列表（有 0 条评论，171人围观）

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

相关阅读

相关 vim列删除、列修改

> vim 块操作一、列修改 1. 首先进入 vim ，按下快捷键 `ctrl + v`进入`块操作模式`。 2. 然后按`上下键`选中你想要批量修改的文本列。

Bertha 。/ 2023年10月03日 20:51/ 0 赞/ 9 阅读

相关 EasyUi DataGrid的列中添加带图标按钮

需求：如题： 1、js代码：在js构造easyui列表的代码中增加一个虚拟列（其中的addFieldViewTab 是我自定义的一个点击函数） ,

妖狐艹你老母/ 2022年11月30日 12:41/ 0 赞/ 594 阅读

相关瀑布流列子，数据库 ormlite 列子，PhotoView 列子等，反正是一个完整的app列子

这是我利用下班时间搞得一个小应用，应用还参考了一下，几个开源的应用，本来是想打广告到各大市场，上面赚点零食费的，但是由于ZF，国家政策限制各大应用市场都不接收。今天我就

骑猪看日落/ 2022年08月14日 02:36/ 0 赞/ 121 阅读

相关 MySQL 添加列,修改列,删除列

MySQL 添加列,修改列,删除列 ALTER TABLE：添加，修改，删除表的列，约束等表的定义。　　查看列：desc 表名; 　　修改表名：alter tab

青旅半醒/ 2022年08月09日 09:46/ 0 赞/ 285 阅读

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

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

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

相关 SQL 增加列、修改列、删除列

1.增加列： alter table tableName add columnName varchar(30) 2.1. 修改列类型：

╰半橙微兮°/ 2022年06月14日 22:45/ 0 赞/ 319 阅读

相关【easyui】动态显示datagrid列

以前做法 $("datagridId").datagrid("hideColumn", "columnField"); // 设置隐藏列现在做法

深藏阁楼爱情的钟/ 2022年06月13日 06:18/ 0 赞/ 375 阅读

相关 easyui datagrid自定义按钮列,最后操作列

目前小菜总结了两种方法：一、datagrid绑定数据列是通过HTML设置好的 <table id="dg" title="用户管理" style="width:

￡神魔★判官ぃ/ 2022年06月07日 04:38/ 0 赞/ 241 阅读

相关修改功能（+easyUI）

数据表格绑定双击事件 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG

迷南。/ 2022年03月20日 07:22/ 0 赞/ 231 阅读

相关 easyui之datagrid动态修改列

easyui datagrid 定义列的方式通常是： $('grid').datagrid({columns:[[ {field:'f1',tit

水深无声/ 2021年06月24日 14:34/ 0 赞/ 661 阅读