前端拖拽效果

适用于一些前端需要拖拽的效果的（目前效果，页面刷新消失），注意黄色地方的参数等根据实际情况修改。

当时的效果图，table里面的tr可以上下拖动改变图层效果、

 /*服务配置拖拽效果*/
      function drag() {
            function x(id){
                return document.getElementById(id);
            }
            //获取鼠标位置
            function getMousePos(e){
                return {
                    x : e.pageX || e.clientX + document.body.scrollLeft,
                    y : e.pageY || e.clientY + document.body.scrollTop
                }
            }
            //获取元素位置
            function getElementPos(el){
                return {
                    x : el.offsetParent ? el.offsetLeft + arguments.callee(el.offsetParent)['x'] : el.offsetLeft,
                    y : el.offsetParent ? el.offsetTop + arguments.callee(el.offsetParent)['y'] : el.offsetTop
                }
            }
            //获取元素尺寸
            function getElementSize(el){
                return {
                    width : el.offsetWidth,
                    height : el.offsetHeight
                }
            }
            //禁止选择
            document.onselectstart = function(){
                return false;
            }
            //判断是否有挪动
            var MOVE = {};
            MOVE.isMove = false;

            //就是创建的标杆
            var div = document.createElement('tr');
            div.style.width = '400px';
            div.style.height = '1px';
            div.style.fontSize = '0';
            div.style.background = 'red';

            var outer_wrap = x('lot');
            outer_wrap.onmousedown = function(event){
                //获取列表顺序

                var lis = outer_wrap.getElementsByClassName('lot_box');
                for(var i = 0; i < lis.length; i++){
                    lis[i]['pos'] = getElementPos(lis[i]);
                    lis[i]['size'] = getElementSize(lis[i]);
                }
                event = event || window.event;
                var t = event.target || event.srcElement;
                var t_parent = t.parentNode;
//                alert(t_parent);
                if(t_parent.tagName.toLowerCase() == 'tr'){
                    var p = getMousePos(event);
                    var el = t_parent.cloneNode(true);
                    el.style.position = 'absolute';
                    el.style.left = t_parent.pos.x + 'px';
                    el.style.top = t_parent.pos.y + 'px';
                    el.style.width = t_parent.size.width + 'px';
                    el.style.height = t_parent.size.height + 'px';
                    el.style.border = '1px solid #d4d4d4';
                    el.style.background = '#d4d4d4';
                    el.style.opacity = '0.7';
                    document.body.appendChild(el);

                    document.onmousemove = function(event){
                        event = event || window.event;
                        var current = getMousePos(event);
                        el.style.left =t_parent.pos.x + current.x - p.x + 'px';
                        el.style.top =t_parent.pos.y + current.y - p.y+ 'px';
                        document.getElementById("lot").style.cursor = 'move';

                        //判断插入点
                        for(var i = 0; i < lis.length; i++){

                            if(current.x > lis[i]['pos']['x'] && current.x < lis[i]['pos']['x'] + lis[i]['size']['width'] && current.y > lis[i]['pos']['y'] && current.y < lis[i]['pos']['y'] + lis[i]['size']['height']/2){
                                if(t_parent != lis[i]){
                                    MOVE.isMove = true;
                                    outer_wrap.insertBefore(div,lis[i]);
                                }

                            }else if(current.x > lis[i]['pos']['x'] && current.x < lis[i]['pos']['x'] + lis[i]['size']['width'] && current.y > lis[i]['pos']['y'] + lis[i]['size']['height']/2 && current.y < lis[i]['pos']['y'] + lis[i]['size']['height']){
                                if(t_parent != lis[i]){
                                    MOVE.isMove = true;
                                    outer_wrap.insertBefore(div,lis[i].nextSibling);
                                }
                            }
                        }
                    }
                    //移除事件
                    document.onmouseup = function(event){
                        event = event || window.event;
                        document.onmousemove = null;
                        if(MOVE.isMove){
                            outer_wrap.replaceChild(t_parent,div);
                            MOVE.isMove = false;
                        }
                        document.body.removeChild(el);
                        el = null;
                        document.body.style.cursor = 'normal';
                        document.onmouseup = null;
                    }
                }
            }
        }

参考其他的项目效果：