js实现页面左右上下拖拽

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
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端-潇凡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值