JS拖动DIV布局

方法一：

<!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>
时间： 2024-11-25 10:52:51

JS拖动DIV布局的相关文章

JS拖动div的原理

要实现移动窗体,首先要捕获三个参数:1.a = 鼠标点击时的坐标.2.b = 被移动窗体的左顶点坐标.3.c = 鼠标移动时的坐标.然后还要算出你鼠标无论点击窗体哪个位置,移动改变的都是 (d = 窗体左顶点的坐标),计算公式:d = c - a + b; 因为移动窗体的原理就是改变窗体的左顶点坐标值,计算出上面的坐标公式后,剩下的就是在鼠标移动事件里添加修改窗体左顶点top和left数值的方法.

javascript拖动div

div拖动代码,在用此代码之前,你可能需要将你需要拖动的元素style设置position: absolute; #textareaSavaDiv{ position: absolute; right:50px; width:300px; height:300px; } html <div id="textareaSavaDiv"> <input type="text" id="username"/> </div&g

js实现可拖动Div

js实现可拖动Div 随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的windows8 系统的App都可以用js开发了,大家有时间可以去尝试一下. 现在切入正题,说一下js 实现可拖动Div.实现这个功能我们先说一下思路: 1.捕捉鼠标div的mousedown事件 2.捕捉 document的   mousemove事件 3.取消事件 然后我们看一下代

table布局与div布局

DIV与TABLE本身并不存在什么优缺点,所谓web标准只是推荐的是正确的使用标签,好比说:DIV用于布局,而TABLE则本来就是转二维数据的.让TABLE做该做的事,并不是说页面里不出现TABLE就是多么多么牛. DIV是标准,是大势所趋,但并不意味着所有的页面都适合用它来做. 中国的门户和国外的有很大的区别,中国网民并不喜欢信息量少的页面,YAHOO到了中国页面上的内容就多了不少,而上次改为简洁的页面后访问量下降的厉害以至于没过几天就又改了回来.正式由于中国的国情造就了搜狐.新浪这样门户.

6.4 DIV布局制作淘宝首页

为了加深对DIV层布局的理解,下面就来体验一把什么是DIV层布局. 使用Dreamweaver来绘制如图1所示的层布局页面,具体操作岁骤如下: 图1 DIV层布局页面 (1) 打开Dreamweaver,新建一个空白文档. (2) 在插入栏的“布局”类别中单击“绘制层”按钮. (3) 在“文档”窗口的“设计”视图中,执行下列操作之一: ●  按下鼠标左键拖动以绘制一个层. ●  通过按住Ctrl键并按下鼠标左键进行拖动来连续绘制多个层(只要不松开Ctrl键,就可以继续绘制新的层). (4) 绘制

谈谈Ext JS的组件——布局的使用方法续二

绝对布局(Ext.layout.container.Absolute) 绝对布局让我回想到了使用Foxpro开发的时候,哪时候的界面布局就是这样,通过设置控件的左上角坐标(x,y)和宽度来进行的,因为输入控件的 高度基本是固定的,所以不需要设置.在可视化编程没有出现之前,开发界面算是个苦差事,因为布局是需要花费不少功夫的,例如想要在已经定义好的组件中插入 一个组件,那就得重新修改插入位置以下的组件的坐标,这工作是比较枯燥无聊的,因而,在没必要的情况下,还是少选择这种布局模式. 绝对布局是使用CS

js拖动层

模仿网易彩票网(http://caipiao.163.com/)的登陆框自己做了一个拖动层,不过有点小问题——在谷歌浏览拖动的时候鼠标状态变成了文字状态(cursor:text;) 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xml

[可拖动DIV]刚开通博客顺便就写了点东西！

说说我自己的思路 首先需要一个初始div div { border: 1px #333 solid; width: 200px; height: 50px; } <div id="od">我是一个可拖动div</div> 然后就是鼠标事件,想象一下拖动这个过程需要用到哪些事件... 1.鼠标按钮按下事件mousedown 2.鼠标按钮松开事件mouseup 3.鼠标移动事件mousemove 第一步:给div添加鼠标按钮按下事件,这个事件需要完成以下事情 一.获

jquery拖动DIV[转]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Conte