js实现页面左右上下拖拽

来源：互联网发布：美国人网购用什么软件编辑：程序博客网时间：2024/06/07 01:23

function Move_obj(obj,col) {    var zmove = false;    var D = new Function('obj', 'return document.getElementsByClassName("ky-bodys active")[0].getElementsByClassName(obj)[0];');    var oevent = new Function('e', 'if (!e) e = window.event;return e');    var x, y;    D(obj).onmousedown = function (e) {        $('.mask').addClass('active');        zmove = true;        with (this) {            var temp1 = offsetLeft;             var temp2 = offsetTop;            x = oevent(e).clientX;             y = oevent(e).clientY;            document.onmousemove = function (e) {                if (!zmove) return false;                with (this) {                    var sl = temp1 + oevent(e).clientX - x, st =temp2 + oevent(e).clientY - y, ww = $(window).width(), wh = $(window).height();                    if(col == 'col'){                        style.left = sl + "px";                        $('.ky-bodys.active .ky-center-line').css('left',sl + "px");                        $('.ky-bodys.active .ky-ne-line').css({'left':sl + "px",'width':ww-sl});                        $('.ky-bodys.active .ky-body-left .ky-pannel-header').css({'width':sl + "px"});                        $('.ky-bodys.active .ky-body-right .ky-pannel-header').css({'width':ww-sl + "px"});                        $('.ky-bodys.active .ky-body-left').width(style.left);                        $('.ky-bodys.active .ky-body-right').width(ww-sl-1);                    }else if(col == 'row'){                        style.top = st + "px";                        $('.ky-bodys.active .ky-center-line').css('top',st + "px");                        $('.ky-bodys.active .ky-body-right-top').height(style.top);                        $('.ky-bodys.active .ky-body-right-bottom').height(wh-st-1);                    }else if(col == undefined){                        style.left = sl + "px";                        style.top = st + "px";                        $('.ky-bodys.active .ky-sw-line').css('left',sl + "px");                        $('.ky-bodys.active .ky-ne-line').css({'left':sl + "px",'top':st + "px",'width':ww-sl});                        $('.ky-bodys.active .ky-body-left .ky-pannel-header').css({'width':sl + "px"});                        $('.ky-bodys.active .ky-body-right .ky-pannel-header').css({'width':ww-sl + "px"});                        $('.ky-bodys.active .ky-body-left').width(style.left);                        $('.ky-bodys.active .ky-body-right').width(ww-sl-1);                        $('.ky-bodys.active .ky-body-right-top').height(style.top);                        $('.ky-bodys.active .ky-body-right-bottom').height(wh-st-1);                    }                }            }        }        document.onmouseup = function(){            zmove=false;            $('.mask').removeClass('active');        };    }}function dump(str){    // return console.info(JSON.parse(JSON.stringify(str)));    return JSON.parse(JSON.stringify(str));}

上面是js片段，实现了页面左右，上下的移动。

$(function(){    // 拖拽改变布局    move();});

在html的body中，直接加入3个div。用绝对定位的方式，放到最外层。js获取事件，然后，给我相应的div块，改变css。

            <div class="ky-sw-line"></div>            <div class="ky-ne-line"></div>            <div class="ky-center-line"></div>

方法有些笨，也有些凌乱。先放着，后期优化。

0 0