用javascript做拖动布局的思路

 更新时间:2008年05月31日 00:01:47   作者:  
这几天不是很忙,就找了些拖动布局方面的资料看看,也学着写了个拖动布局的效果,没想到花了好多时间, 七拼八凑,总算是把这个效果写出来了。哎!还是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; 



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

能力有限,有些地方可能说的不清不楚,若有兴趣,自己好好看看代码吧。
有什么不足的地方,请指教。

相关文章

  • JS+CSS实现滑动切换tab菜单效果

    JS+CSS实现滑动切换tab菜单效果

    这篇文章主要介绍了JS+CSS实现滑动切换tab菜单效果,涉及javascript鼠标事件及页面元素样式的动态切换效果实现技巧,需要的朋友可以参考下
    2015-08-08
  • file-loader打包图片文件时路径错误输出为[object-module]的解决方法

    file-loader打包图片文件时路径错误输出为[object-module]的解决

    这篇文章主要介绍了file-loader打包图片文件时路径错误输出为[object-module]的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • 屏蔽网页右键复制和ctrl+c复制的js代码

    屏蔽网页右键复制和ctrl+c复制的js代码

    解决的方法就是直接把网页保存下来然后删掉下面这段js代码,然后就可以正常用右键菜单,也可以通过设置浏览器的安全级别到最高级别来解决问题
    2013-01-01
  • 纯CSS3代码实现滑动开关效果

    纯CSS3代码实现滑动开关效果

    CSS33D炫酷左右滑动开关按钮是一款非常酷的CSS3 3D开关按钮,点击按钮可以左右滑动,就像开关打开闭合一样的效果,通过本篇文章给大家介绍纯CSS3代码实现滑动开关效果,需要的朋友可以参考下
    2015-08-08
  • JS实现灵巧的下拉导航效果代码

    JS实现灵巧的下拉导航效果代码

    这篇文章主要介绍了JS实现灵巧的下拉导航效果代码,通过自定义js插件脚本dropdown.js实现简单的下拉导航效果的功能,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • 简单实现JS计算器功能

    简单实现JS计算器功能

    这篇文章主要教大家简单实现JS计算器功能,实现小数点校验,重复计算,以及大量更符合用户体验的操作,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • JS实现DIV高度自适应窗口示例

    JS实现DIV高度自适应窗口示例

    这篇文章主要介绍了JS实现DIV高度自适应窗口的方法,结合完整实例形式分析了JS通过动态操作页面元素属性实现高度自适应的相关技巧,需要的朋友可以参考下
    2017-02-02
  • JS模拟面向对象全解(一、类型及传递)

    JS模拟面向对象全解(一、类型及传递)

    首先说明JS的特点。JS是弱类型的语言,像什么模板多态、又是类又是结构的说法,就完全不存在。
    2011-07-07
  • js中函数调用的两种常用方法使用介绍

    js中函数调用的两种常用方法使用介绍

    这篇文章主要介绍了js中函数调用的两种常用方法使用,需要的朋友可以参考下
    2014-07-07
  • javascript鼠标右键菜单自定义效果

    javascript鼠标右键菜单自定义效果

    设计专属于自己的右键菜单,添加自己需要的快捷方式,本文就为大家分享自定义javascript鼠标右键菜单的实现方法,感兴趣的小伙伴们可以参考一下
    2016-02-02

最新评论