JS拖动DIV布局

时间：2024-04-30 23:34:08
方法一：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title></title>

<style type="text/css">

*{ margin: 0; padding: 0; -moz-user-select:none;}

ul{ margin: 100px; border: 1px solid #adff2f; list-style: none;}

li{ height: 30px; line-height: 30px; padding: 0; list-style: none;}

li:hover{ background: #bdb76b; cursor: move;}

</style>

</head>

<body>

<ul id="outer_wrap">

<li>第一条</li>

<li>第二条</li>

<li>第三条</li>

<li>第四条</li>

<li>第五条</li>

<li>第六条</li>

<li>第七条</li>

<li>第八条</li>

</ul>

<script type="text/javascript">

function $(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('div');

div.style.width = '400px';

div.style.height = '1px';

div.style.fontSize = '0';

div.style.background = 'red';

var outer_wrap = $('outer_wrap');

outer_wrap.onmousedown = function(event){

//获取列表顺序

var lis = outer_wrap.getElementsByTagName('li');

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;

if(t.tagName.toLowerCase() == 'li'){

var p = getMousePos(event);

var el = t.cloneNode(true);

el.style.position = 'absolute';

el.style.left = t.pos.x + 'px';

el.style.top = t.pos.y + 'px';

el.style.width = t.size.width + 'px';

el.style.height = t.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.pos.x + current.x - p.x + 'px';

el.style.top =t.pos.y + current.y - p.y+ 'px';

document.body.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 != 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 != 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,div);

MOVE.isMove = false;

}

document.body.removeChild(el);

el = null;

document.body.style.cursor = 'normal';

document.onmouseup = null;

}

}

}

</script>

</body>

</html>

方法二：

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

    <title>Js实现无刷新添加新层，拖动DIV层可互换位置丨芯晴网页特效丨CsrCode.Cn</title>

    <style>

    body {margin:0px;padding:0px;font-size:12px;text-align:center;}

    body > div {text-align:center; margin-right:auto; margin-left:auto;}

    .content{width:900px;}

    .content .left{

        float:left;

        width:20%;

        border:1px solid #0066CC;

        margin:3px;

    }

    .content .center{float:left;border:1px solid #FF0000;margin:3px;width:57%}

    .content .right{float:right;width:20%;border:1px solid #FF00FF;margin:3px}

    .mo{height:auto;border:1px solid #CCC;margin:3px;background:#FFF}

    .mo h1{background:#ECF9FF;height:18px;padding:3px;cursor:move}

    .closediv{cursor:default;}

    .minusspan{cursor:default;}

    .mo .nr{height:80px;border:1px solid #F3F3F3;margin:2px}

    h1{margin:0px;padding:0px;text-align:left;font-size:12px}

    .dragging {

        FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=60); opacity: 0.6; moz-opacity: 0.6

    }

    </style>

    <script language="javascript">

    var dragobj={}

    window.onerror=function(){return false}

    var domid=12

    function on_ini(){

        String.prototype.inc=function(s){return this.indexOf(s)>-1?true:false}

        var agent=navigator.userAgent

        window.isOpr=agent.inc("Opera")

        window.isIE=agent.inc("IE") && !isOpr

        window.isMoz=agent.inc("Mozilla") && !isOpr && !isIE

        if(isMoz){

            Event.prototype.__defineGetter__("x",function(){return this.clientX+2})

            Event.prototype.__defineGetter__("y",function(){return this.clientY+2})

        }

        basic_ini()

    }

    function basic_ini(){

        window.$=function(obj){return typeof(obj)=="string"?document.getElementById(obj):obj}

        window.oDel=function(obj){if($(obj)!=null){$(obj).parentNode.removeChild($(obj))}}

    }

    window.oDel=function(obj){if($(obj)!=null){$(obj).parentNode.removeChild($(obj))}}

    window.onload=function(){

        on_ini()

        var o=document.getElementsByTagName("h1")

        for(var i=0;i<o.length;i++){

            o[i].onmousedown=addevent;

            //添加折叠和关闭按钮

            var tt = document.createElement("div");

            tt.style.cssText = "float:left";  

            var span = document.createElement("span");

            span.innerHTML = "--"+o[i].innerHTML;

            span.style.cssText = "cursor:default;";

            span.onmousedown = minusDiv;

            tt.appendChild(span);  

            var close = document.createElement("div");

            close.innerHTML = "X";

            close.style.cssText = "cursor:default;float:right";

            close.onmousedown = closeDiv;

            o[i].innerHTML = "";

            o[i].appendChild(tt);

            o[i].appendChild(close);

        }

    }

    //折叠或者显示层

    function minusDiv(e)

    {

        e=e||event

        var nr = this.parentNode.parentNode.nextSibling;    //取得内容层

        nr.style.display = nr.style.display==""?"none":"";

    }

    //移出层

    function closeDiv(e)

    {

        e=e||event

        var mdiv = this.parentNode.parentNode;    //取得目标层

        oDel(mdiv);

    }

    function addevent(e){

        if(dragobj.o!=null)

            return false

        e=e||event

        dragobj.o=this.parentNode

        dragobj.xy=getxy(dragobj.o)

        dragobj.xx=new Array((e.x-dragobj.xy[1]),(e.y-dragobj.xy[0]))

        //dragobj.o.className = 'dragging';

        dragobj.o.style.width=dragobj.xy[2]+"px"

        dragobj.o.style.height=dragobj.xy[3]+"px"

        dragobj.o.style.left=(e.x-dragobj.xx[0])+"px"

        dragobj.o.style.top=(e.y-dragobj.xx[1])+"px"

        dragobj.o.style.position="absolute"

        dragobj.o.style.filter='alpha(opacity=60)';        //添加拖动透明效果

        var om=document.createElement("div")

        dragobj.otemp=om

        om.style.width=dragobj.xy[2]+"px"

        om.style.height=dragobj.xy[3]+"px"

        om.style.border = "1px dashed red";    //ikaiser添加，实现虚线框

        dragobj.o.parentNode.insertBefore(om,dragobj.o)

        return false

    }

    document.onselectstart=function(){return false}

    window.onfocus=function(){document.onmouseup()}

    window.onblur=function(){document.onmouseup()}

    document.onmouseup=function(){

        if(dragobj.o!=null){

            dragobj.o.style.width="auto"

            dragobj.o.style.height="auto"

            dragobj.otemp.parentNode.insertBefore(dragobj.o,dragobj.otemp)

            dragobj.o.style.position=""

            oDel(dragobj.otemp)

            dragobj={}

        }

    }

    document.onmousemove=function(e){

        e=e||event

        if(dragobj.o!=null){

            dragobj.o.style.left=(e.x-dragobj.xx[0])+"px"

            dragobj.o.style.top=(e.y-dragobj.xx[1])+"px"

            createtmpl(e, dragobj.o)    //传递当前拖动对象

        }

    }

    function getxy(e){

        var a=new Array()

        var t=e.offsetTop;

        var l=e.offsetLeft;

        var w=e.offsetWidth;

        var h=e.offsetHeight;

        while(e=e.offsetParent){

            t+=e.offsetTop;

            l+=e.offsetLeft;

        }

        a[0]=t;a[1]=l;a[2]=w;a[3]=h

      return a;

    }

    function inner(o,e){

        var a=getxy(o)

        if(e.x>a[1] && e.x<(a[1]+a[2]) && e.y>a[0] && e.y<(a[0]+a[3])){

            if(e.y<(a[0]+a[3]/2))

                return 1;

            else

                return 2;

        }else

            return 0;

    }

    //将当前拖动层在拖动时可变化大小，预览效果

    function createtmpl(e, elm){

        for(var i=0;i<domid;i++){

            if(document.getElementById("m"+i) == null)    //已经移出的层不再遍历

                continue;

            if($("m"+i)==dragobj.o)

                continue

            var b=inner($("m"+i),e)

            if(b==0)

                continue

            dragobj.otemp.style.width=$("m"+i).offsetWidth

            elm.style.width = $("m"+i).offsetWidth;

            //1为下移，2为上移

            if(b==1){

                $("m"+i).parentNode.insertBefore(dragobj.otemp,$("m"+i))

            }else{

                if($("m"+i).nextSibling==null){

                    $("m"+i).parentNode.appendChild(dragobj.otemp)

                }else{

                    $("m"+i).parentNode.insertBefore(dragobj.otemp,$("m"+i).nextSibling)

                }

            }

            return

        }

        for(var j=0;j<3;j++){

            if($("dom"+j).innerHTML.inc("div")||$("dom"+j).innerHTML.inc("DIV"))

                continue

            var op=getxy($("dom"+j))

            if(e.x>(op[1]+10) && e.x<(op[1]+op[2]-10)){

                $("dom"+j).appendChild(dragobj.otemp)

                dragobj.otemp.style.width=(op[2]-10)+"px"

            }

        }

    }

    function add_div()

    {

        var o=document.createElement("div")

        o.className="mo"

        o.id="m"+domid

        $('dom0').appendChild(o)

        o.innerHTML="<h1>dom"+domid+"</h1><div class="nr"></div>"

        o.getElementsByTagName("h1")[0].onmousedown=addevent

        domid++

    }

    </script>

    </head>

    <body>

    <INPUT TYPE="button" value="添加一个新的DIV层" onclick="add_div();">

    <div class="content">

        <div class="left" id=dom0>

            <div class="mo" id=m0>

                <h1>dom0</h1>

                <div class="nr"></div>

            </div>

            <div class="mo" id=m1>

                <h1>dom1</h1><div class="nr"></div>

            </div>

            <div class="mo" id=m2><h1>dom2</h1><div class="nr"></div></div>

        </div>

        <div class="center" id=dom1>

            <div class="mo" id=m3><h1>dom3</h1><div class="nr"></div></div>

            <div class="mo" id=m4><h1>dom4</h1><div class="nr"></div></div>

            <div class="mo" id=m5><h1>dom5</h1><div class="nr"></div></div>

        </div>

        <div class="right" id=dom2>

            <div class="mo" id=m6><h1>dom6</h1><div class="nr"></div></div>

            <div class="mo" id=m7><h1>dom7</h1><div class="nr"></div></div>

        </div>

    </div>

    </body>

    </html>

相关文章