jquery 移出子节点 jquery移动节点

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