151-3895-5886

Javascript制作拖动网页布局的办法

2019年09月19日 维尼网络
这几天不是很忙,就找了些拖动布局方面的资料看看,也学着写了个拖动布局的效果,没想到花了好多时间,
七拼八凑,总算是把这个效果写出来了。哎!还是js的功夫太差。因为是边找资料边写的,很多地方印象不深,
时间一长,再重新写估计也难,所以把当时的思路记录一下!也希望大虾指点一下!

好了,转入正文,在开始之前先介绍几个功能函数!
1.格式化事件的函数
程序代码
function getEvent(){
     //同时兼容ie和ff的写法
     if(document.all)    return window.event;
     func=getEvent.caller;
     while(func!=null){
         var arg0=func.arguments[0];
         if(arg0){
             if((arg0.constructor==Event || arg0.constructor ==MouseEvent)
                || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)){    
                return arg0;
              }
         }
          func=func.caller;
        }
        return null;
}

2.取得鼠标的位置
程序代码
function mouseCoords(ev){
    if(ev.pageX || ev.pageY){
        return {x:ev.pageX, y:ev.pageY};
    }
    return {
        x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
        y:ev.clientY + document.body.scrollTop - document.body.clientTop
    };
}

3.得到元素的位置
程序代码
function getPosition(ele){
    var left = 0;
    var top = 0;
    while (ele.offsetParent){
        left += ele.offsetLeft;
        top += ele.offsetTop;
        ele = ele.offsetParent;
    }
    left += ele.offsetLeft;
    top += ele.offsetTop;
    return {x:left, y:top};
}
首先,当然是写好初始布局的页面,  查看初始页面效果

一般拖动的元素是跟随鼠标的,我的思路是在把拖动的元素增加到一个position为absolute的div中,
鼠标拖动的时候就让它的位置根据鼠标的坐标变化就可以了。所以在页面增加了个onload
程序代码
var tmpDiv=null;//临时存放拖动对象的div
window.onload=function(){
    tmpDiv=document.createElement("div");
    tmpDiv.style.cssText = 'position:absolute;display:none;border:1px dotted #FFCC66;';
    document.body.appendChild(tmpDiv);
}

要实现拖动,首先触发的事件是mouseDown,所以我在拖动的table的一个td上绑定了onmousedown="mouseDown(this);"
程序代码
var dragObject = null;//拖动的元素(table)
var mouseOffset = null;//鼠标的在拖动元素中的位置
var dragDiv=null;//拖动的table所在的列的div
var eleDivW=null;//拖动的table的父节点(div)的高度
var dragDivLen=null;//拖动的table所在的列的div中用来放置table的div的个数
var DragContainer=["col1","col2","col3"];//用来实现列布局的div的id
//鼠标按下拖动的元素
function mouseDown(elem){
    ev=getEvent();
    dragObject = elem.parentNode.parentNode.parentNode;//被拖动的table
    dragDiv=dragObject.parentNode.parentNode;
    //拖动元素所在列里div的个数
    dragDivLen=dragDiv.getElementsByTagName("div").length;
    mouseOffset = getMouseOffset(dragObject, ev);
    eleDivW=dragObject.parentNode.offsetWidth;
    dragObject.parentNode.style.border="1px dotted #FFCC66";
    return false;
}
//得到鼠标在拖动元素中的位置
function getMouseOffset(target, ev){
    var docPos = getPosition(target);
    var mousePos = mouseCoords(ev);
    return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}

剩下的当然就是鼠标移动拖动对象也能移动,用到的当然就是mouseMove咯,为简单我在document上绑定,
程序代码
document.onmousemove = mouseMove;
function mouseMove(){
    ev=getEvent();
    var mousePos = mouseCoords(ev);
    if(dragObject){
        dragObject.parentNode.style.display="none";//设置放置被拖动table的div隐藏
        //把拖动的table放到临时的div中,并设置其坐标
        for(var i=0; i<tmpDiv.childNodes.length; i++) tmpDiv.removeChild(tmpDiv.childNodes[i]);
        tmpDiv.appendChild(dragObject.cloneNode(true));
        tmpDiv.style.width=eleDivW+"px";
        tmpDiv.style.backgroundColor="#FFFFFF";
        tmpDiv.style.display="block";
        tmpDiv.style.top = (mousePos.y - mouseOffset.y)+"px";
        tmpDiv.style.left = (mousePos.x - mouseOffset.x)+"px";
    }
    return false;
}

有了mousemove当然少不了mouseup
程序代码
document.onmouseup = mouseUp;
//鼠标松开
function mouseUp(){
    if(dragObject){
        if(dragObject.parentNode.style.display=="none") dragObject.parentNode.style.display="block";
        dragObject.parentNode.style.border="1px solid #FFCC66";
        tmpDiv.style.display="none";
        //这里是判断当列里有可拖动的元素时清除前面设置的高度值20px
        for(var m=0;m<DragContainer.length;m++){
            var colDiv=document.getElementById(DragContainer[m]);
            var colDivLen=colDiv.getElementsByTagName("div").length
            var colSty=colDiv.getAttribute("style");
            if(colDivLen>0&&colSty!=null){
                colDiv.removeAttribute("style");
                break;
            }
        }
        dragObject=null;
    }
}


看看是不是可以拖动了,当你松开鼠标左键时,拖动的元素将回到原来的位置  查看拖动页面效果


最后要做的就是让拖动元素不回到原来的位置,而是回到我们拖动的位置。
下面是mousemove事件的所有代码,看看注释就明白了
程序代码
function mouseMove(){
    ev=getEvent();
    var mousePos = mouseCoords(ev);
    if(dragObject){
        //可拖动的个数为1,说明拖动后此列就没有拖动元素,为避免此列没有高度而不见,所以设置其高度为20px
        if(dragDivLen==1) dragDiv.style.height="20px";
        dragObject.parentNode.style.display="none";
        //把拖动的元素加入到临时的tmpDiv中,并设置tmpDiv坐标
        for(var i=0; i<tmpDiv.childNodes.length; i++) tmpDiv.removeChild(tmpDiv.childNodes[i]);
        tmpDiv.appendChild(dragObject.cloneNode(true));
        tmpDiv.style.width=eleDivW+"px";
        tmpDiv.style.backgroundColor="#FFFFFF";
        tmpDiv.style.display="block";
        tmpDiv.style.top = (mousePos.y - mouseOffset.y)+"px";
        tmpDiv.style.left = (mousePos.x - mouseOffset.x)+"px";
        //被拖动对象的中心点的坐标
        var dragObjCntX=mousePos.x - mouseOffset.x+parseInt(dragObject.offsetWidth)/2;
        var dragObjCntY=mousePos.y - mouseOffset.y+parseInt(dragObject.offsetHeight)/2;
        //判断tmpDiv所在的列
        var dragConLen=DragContainer.length;
        for(var i=0;i<dragConLen;i++){
            var curContainer=document.getElementById(DragContainer[i]);
            var dcPos=getPosition(curContainer);
            var dcPosMinX=dcPos.x;
            var dcPosMinY=dcPos.y;
            var dcWidth=curContainer.offsetWidth;
            var dcHeight=curContainer.offsetHeight;
            var dcPosMaxX=dcPosMinX+dcWidth;
            var dcPosMaxY=dcPosMinY+dcHeight;
            if(dragObjCntX>dcPosMinX&&dragObjCntX<dcPosMaxX&&dragObjCntY>dcPosMinY&&dragObjCntY<dcPosMaxY){
                var activeContainer=curContainer;
                break;
            }
        }
    }
    //判断tmpDiv在此列哪个区块范围内
    if(activeContainer){
        var beforNode=null;
        var sDiv=activeContainer.getElementsByTagName("div")
        var acChiLen=sDiv.length;
        for(j=acChiLen-1;j>=0;j--){
            var activeDiv=sDiv[j];
            if(activeDiv){
                var activeDivPos=getPosition(activeDiv);
                var activeDivMinX=activeDivPos.x;
                var activeDivMinY=activeDivPos.y;
                var activeDivMaxX=activeDivMinX+activeDiv.offsetWidth;
                var activeDivMaxY=activeDivMinY+activeDiv.offsetHeight;
                if(activeDivMaxX>dragObjCntX&&activeDivMaxY>dragObjCntY){
                //if(dragObjCntX>activeDivMinX&&dragObjCntX<activeDivMaxX&&dragObjCntY>activeDivMinY&&dragObjCntY<activeDivMaxY){
                    beforNode=activeDiv;
                }
            }
            
        }
        //若此区块存在,就在此区块前插入拖动元素
        if(beforNode!=null){
            if(dragObject.parentNode!=beforNode){
                curContainer.insertBefore(dragObject.parentNode,beforNode);
                dragObject.parentNode.style.display="block";
                //document.getElementById("test").value=curContainer.id;
            }
        }
        //不存在就在所在列插入拖动元素
        else{
            curContainer.appendChild(dragObject.parentNode);
            dragObject.parentNode.style.display="block";
        }
    }
    return false;
}

好了,一个可以拖动布局的页面就完成了  查看最终页面效果

能力有限,有些地方可能说的不清不楚,若有兴趣,自己好好看看代码吧。
网页棋牌游戏平台有什么不足的地方,请指教。

阅读更多内容
上一篇深入学习Javascript函数
下一篇网页制作中常用的Javascript代码

声明:本页内容由郑州维尼网络收集编辑所得,所有资料仅供用户参考,转载请保留此链接http://rbyvp.cn/cms/3619.html

本文标签: javascript 网页 布局 制作 方法 拖动

 

相关资讯 Related Info
相关分类 News Classification
解决方案 Solutions
相关热点 Hot spot
接触 solaris : 整和 apache 和 tomcat 接触 solaris : 整和 apache 和 tomcat
  1. 我们的承诺
  2. 我们的实力
  3. 我们的未来
郑州做网站咨询电话 建站咨询

151-3895-5886

网站备案安全放心网站

地址:郑州市上街区和昌都汇广场 / 电话:151-3895-5886
客服QQ: / 邮箱:admin@zzwn.cn
Copyright © 2010-2019 郑州融科网络 版权所有

北京快乐8飞盘 北京快乐8官网 最正规的棋牌游戏平台 北京快乐8走势图 北京快乐8和值 棋牌游戏送88彩金 网易彩票网 现金的棋牌游戏 棋牌游戏行业资讯 最正规的棋牌游戏平台 真人百家乐平台复制打开网址【82324.com】 真人百家乐平台复制打开网址【82324.com】 真人百家乐平台复制打开网址【82324.com】 真人百家乐平台复制打开网址【82324.com】 真人百家乐平台复制打开网址【82324.com】 北京赛车平台复制打开网址【82324.com】 澳门百家乐平台复制打开网址【82324.com】 秒速赛车平台复制打开网址【82324.com】 秒速赛车平台复制打开网址【82324.com】 秒速飞艇平台复制打开网址【82324.com】 重庆时时彩平台复制打开网址【82324.com】 重庆时时彩平台复制打开网址【82324.com】 重庆时时彩平台复制打开网址【82324.com】 加拿大28平台复制打开网址【82324.com】 加拿大28平台复制打开网址【82324.com】 加拿大28平台复制打开网址【82324.com】 秒速快3平台复制打开网址【82324.com】 秒速快3平台复制打开网址【82324.com】 秒速快3平台复制打开网址【82324.com】 秒速牛牛平台复制打开网址【82324.com】 秒速牛牛平台复制打开网址【82324.com】 秒速牛牛平台复制打开网址【82324.com】 彩票开户平台复制打开网址【82324.com】 彩票开户平台复制打开网址【82324.com】 幸运快乐8平台复制打开网址【82324.com】 幸运快乐8平台复制打开网址【82324.com】 幸运快乐8平台复制打开网址【82324.com】 幸运快乐8平台复制打开网址【82324.com】 幸运28平台复制打开网址【82324.com】 幸运28平台复制打开网址【82324.com】 幸运28平台复制打开网址【82324.com】 快乐赛车平台复制打开网址【82324.com】 快乐赛车平台复制打开网址【82324.com】 快乐赛车平台复制打开网址【82324.com】 太阳城娱乐平台复制打开网址【82324.com】 太阳城娱乐平台复制打开网址【82324.com】 凤凰彩票APP下载平台复制打开网址【82324.com】 秒速赛车平台复制打开网址【82324.com】 秒速赛车平台复制打开网址【82324.com】 盛世彩票平台复制打开网址【82324.com】 盛世彩票官网 复制打开网址【82324.com】 盛世彩票官网 复制打开网址【82324.com】 香港马会资料平台复制打开网址【82324.com】 香港马会资料平台复制打开网址【82324.com】 香港马会资料平台复制打开网址【82324.com】 香港马会资料平台复制打开网址【82324.com】 大发彩票平台复制打开网址【82324.com】 大发彩票平台复制打开网址【82324.com】 大发彩票平台复制打开网址【82324.com】 迪士尼彩票官网平台复制打开网址【82324.com】 迪士尼彩票官网平台复制打开网址【82324.com】 迪士尼彩票官网平台复制打开网址【82324.com】 迪士尼彩票官网平台复制打开网址【82324.com】 加拿大28预测平台复制打开网址【82324.com】 加拿大28预测平台复制打开网址【82324.com】 加拿大28预测平台复制打开网址【82324.com】 太阳城平台复制打开网址【82324.com】 太阳城平台复制打开网址【82324.com】 幸运飞艇平台复制打开网址【82324.com】 幸运飞艇平台复制打开网址【82324.com】
分享到:QQ空间新浪微博腾讯微博人人网微信