easyUI中droppable，draggable用法列子修改

最新推荐文章于 2019-01-15 16:03:41 发布

原创最新推荐文章于 2019-01-15 16:03:41 发布 · 585 阅读

1 ·

CC 4.0 BY-SA版权

web前端同时被 2 个专栏收录

22 篇文章

订阅专栏

datagrid

1 篇文章

订阅专栏

本文介绍了一个改进后的拖动效果实现方案，通过JavaScript实现了元素在不同区域间的拖拽，并且能够根据拖拽源的不同做出响应调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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;
                    }
                }
            });
        }
    });