easyUI中droppable，draggable用法列子修改-蒲公英云

easyUI中droppable，draggable用法列子修改

港控/mmm° 2022-06-16 03:44 220阅读 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;
                    } }
            });
        }
    });