jQuery拖放节点

缺乏、安全感 2022-04-08 08:51 264阅读 0赞

$(document).ready(function() {
       drag.init();
    })
    //拖拽
    var drag = {
       permitDrag: false, //是否允许移动标识
       _x: 0, //临时节点x坐标
       _y: 0, //节点y坐标
       _left: 0, //光标与节点坐标的距离
       _top: 0, //光标与节点坐标的距离
       old_elm: null, //拖拽原节点
       old_elm_left: 0, //原节点坐标
       old_elm_top: 0,
       old_elm_clone: null, //克隆原节点
       tmp_elm: null, //跟随光标移动的临时节点
       parent_elm: null, //拖拽原节点的父元素
       down_parent_pro: 0, //拖拽节点父元素属性
       up_parent_pro: 0,
       surplus_num: 0, //模块数量
       containerTop: 0, //中心区域到顶部距离
       isMove: false, //是否移动了模块
       old_elm_width: 0, //原节点的宽度
       old_elm_height: 0, //原节点的高度
       isPut: false, //判断模块是否放在指定区域
       
       //初始化
       init: function() {
           drag.surplus_num = Number($('#surplus').text());
           drag.containerTop = $('.container').offset().top;
    
           //监听鼠标按下事件，动态绑定要拖拽的节点（因为节点可能是动态添加的）
           $('.container').on('mousedown', '.dragger', function(event) {
               //当在允许拖拽的节点上监听到点击事件，将标识设置为可以拖拽
               drag.permitDrag = true;
               //获取到拖拽的原节点对象
               drag.old_elm = $(this);
               //执行开始拖拽的操作
               drag.mousedown(event);
               return false;
           });
    
           //监听鼠标移动
           $(document).mousemove(function(event) {
               //判断拖拽标识是否为允许，否则不进行操作
               if (!drag.permitDrag) return false;
               //执行移动的操作
               drag.mousemove(event);
               return false;
           });
    
           //监听鼠标放开
           $(document).mouseup(function(event) {
               //判断拖拽标识是否为允许，否则不进行操作
               if (!drag.permitDrag) return false;
               //拖拽结束后恢复标识到初始状态
               drag.permitDrag = false;
               //执行拖拽结束后的操作
               drag.mouseup(event);
               return false;
           });
       },
    
       //按下鼠标 执行的操作
       mousedown: function(event) {
           drag.isMove = false; //元素未移动
           drag.isPut = false; //重置模块位置判断      
    
           //克隆临时节点，跟随鼠标进行移动
           drag.tmp_elm = $(drag.old_elm).clone();
    
           //计算节点和光标的坐标
           drag._x = $(drag.old_elm).offset().left;
           drag._y = $(drag.old_elm).offset().top - drag.containerTop;
           var e = event || window.event;
           drag._left = e.pageX - drag._x;
           drag._top = e.pageY - drag._y;
    
           // 原节点宽高
           drag.old_elm_width = $(drag.old_elm).outerWidth();
           drag.old_elm_height = $(drag.old_elm).outerHeight();
    
           //修改克隆节点的坐标，实现跟随鼠标进行移动的效果
           $(drag.tmp_elm).css({
               'position': 'absolute',
               'left': drag._x,
               'top': drag._y,
               'margin': '0',
               'paddingLeft': '0',
               'paddingRight': '0',
               'width': drag.old_elm_width,
               'height': drag.old_elm_height
           });
           
           //添加临时节点
           tmp = $(drag.old_elm).parent().append(drag.tmp_elm);
           drag.tmp_elm = $(tmp).find(drag.tmp_elm);
    
           // 获取原节点坐标和克隆
           drag.old_elm_left = drag.old_elm.parent().offset().left;
           drag.old_elm_top = drag.old_elm.parent().offset().top;
           drag.parent_elm = $(drag.old_elm).parent();
           drag.down_parent_pro = drag.parent_elm.attr('data-num');
       },
    
       //移动鼠标 执行的操作
       mousemove: function(event) {
           drag.isMove = true; //元素移动了
           drag.old_elm_clone = $(drag.old_elm).clone(); //克隆原节点
           $(drag.old_elm).remove(); //移除原节点
    
           //计算坐标
           var e = event || window.event;
           var x = e.pageX - drag._left;
           var y = e.pageY - drag._top;
           var maxL = $('.container').width() - drag.old_elm_width;
           var maxT = $('.container').height() - drag.old_elm_height;
    
           //不允许超出浏览器范围
           x = x < 0 ? 0 : x;
           x = x > maxL ? maxL : x;
           y = y < 0 ? 0 : y;
           y = y > maxT ? maxT : y;
    
           //修改克隆节点的坐标
           $(drag.tmp_elm).css({
               'left': x,
               'top': y,
           });
       },
    
       //放开鼠标 执行的操作
       mouseup: function(event) {
           //移除临时节点
           $(drag.tmp_elm).remove();
           if (drag.isMove == true) {
               //判断所在区域是否允许放置节点
               var e = event || window.event;
               $.each($('.drapBox', '.container'), function(index, value) {
                   //获取容器的坐标范围 (区域)
                   var box_x = $(value).offset().left; //容器左上角x坐标
                   var box_y = $(value).offset().top; //容器左上角y坐标
                   var box_width = $(value).outerWidth(); //容器宽
                   var box_height = $(value).outerHeight(); //容器高
    
                   //判断放开鼠标位置是否想允许放置的容器范围内
                   if (e.pageX > box_x && e.pageX < box_x - 0 + box_width && e.pageY > box_y && e.pageY < box_y - 0 + box_height) {
                       //向目标容器添加节点 
                       if ($('.container-center').find($(value)).children().length < 1) {
                           $(value).append(drag.old_elm_clone);
                       } else {
                           $(drag.parent_elm).append(drag.old_elm_clone);
                       }
                       drag.isPut = true; //在指定位置放置了元素
                   }
               });
    
               // 判断鼠标指针超出指定范围        
               if (drag.isPut == false) {
                   $(drag.parent_elm).append(drag.old_elm_clone);
               }
    
               if (self != top) {
                   //判断鼠标在iframe外部松开
                   (window.parent.document).on('mouseup', function() {
                       $(drag.parent_elm).append(drag.old_elm_clone);
                       $(drag.tmp_elm).remove();
                   });
               }
    
               // 获取父元素的属性
               drag.up_parent_pro = $(drag.old_elm_clone).parent().attr('data-num');
               if (drag.up_parent_pro == '1') {
                   sortModule(); //排序 
               }
               
               // 模块数量加减
               if (drag.down_parent_pro == 1 && drag.up_parent_pro != 1) {
                   drag.surplus_num -= 1;
                   $('#surplus').text(drag.surplus_num);
               } else if (drag.down_parent_pro != 1 && drag.up_parent_pro == 1) {
                   drag.surplus_num += 1;
                   $('#surplus').text(drag.surplus_num);
               }
           }
       }
    };