div拖动层自己写

最新推荐文章于 2022-10-10 14:30:03 发布

weixin_30699955

最新推荐文章于 2022-10-10 14:30:03 发布

阅读量55

点赞数

原文链接：http://www.cnblogs.com/Gracedream/archive/2009/12/08/1619087.html

版权

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<style>
body{ background:#e3e9f9;}
.backed{ width:1082px;}
.backed div{display:block; float:left;}
.block1{ background:url(lc_01.gif) no-repeat; width:504px; height:460px;}
.block2{ background:url(lc_02.gif) no-repeat; width:576px; height:460px;}
.block3{ background:url(lc_03.gif) no-repeat; width:504px; height:450px;}
.block4{ background:url(lc_04.gif) no-repeat; width:576px; height:450px;}
.block5{ background:url(lc_05.gif) no-repeat; width:504px; height:432px;}
.block6{ background:url(lc_06.gif) no-repeat; width:576px; height:432px;}
.block7{ background:url(lc_07.gif) no-repeat; width:504px; height:548px;}
.block8{ background:url(lc_08.gif) no-repeat; width:576px; height:548px;}
</style>
</head>

var x,y,z,down=false,obj
function init(){

obj=event.srcElement      //事件触发对象
obj.setCapture()             //设置属于当前对象的鼠标捕捉
z=obj.style.zIndex           //获取对象的z轴坐标值

//设置对象的z轴坐标值为100，确保当前层显示在最前面
obj.style.zIndex=100
x=event.offsetX    //获取鼠标指针位置相对于触发事件的对象的X坐标
y=event.offsetY    //获取鼠标指针位置相对于触发事件的对象的Y坐标
down=true          //布尔值，判断鼠标是否已按下，true为按下，false为未按下
}
function moveit(s){

//判断鼠标已被按下且onmouseover和onmousedown事件发生在同一对象上

if(down&&event.srcElement==obj){
    with(obj.style){
/*设置对象的X坐标值为文档在X轴方向上的滚动距离加上当前鼠标指针相当于文档对象的X坐标值减鼠标按下时指针位置相对于触发事件的对象的X坐标*/

         posLeft=document.body.scrollLeft+event.x-x


/*设置对象的Y坐标值为文档在Y轴方向上的滚动距离加上当前鼠标指针相当于文档对象的Y坐标值减鼠标按下时指针位置相对于触发事件的对象的Y坐标*/
         posTop=document.body.scrollTop+event.y-y
           var i=s;
            document.getElementById("Lsize"+i).value=posLeft
      document.getElementById("Tsize"+i).value=posTop


    }
}
}

function stopdrag(){
//onmouseup事件触发时说明鼠标已经松开，所以设置down变量值为false

down=false
obj.style.zIndex=z //还原对象的Z轴坐标值
obj.releaseCapture() //释放当前对象的鼠标捕捉

}

</script>
<div id="Layer1" οnmοusedοwn="init()" οnmοusemοve="moveit(1)" οnmοuseup="stopdrag()" runat="server" style="left:150px; top:230px;background-color:#FFCCCC; width:110px; height:80px; z-index:1; position:absolute;">aaa</div>
<div id="Layer2" οnmοusedοwn="init()" οnmοusemοve="moveit(2)" οnmοuseup="stopdrag()" runat="server" style="left:300px; top:230px;background-color:#FFCCCC; width:110px; height:80px; z-index:1; position:absolute;">bbb</div>
<input type="text" id="Lsize1" runat="server" style="display:none;"/>
<input type="text" id="Tsize1" runat="server" style="display:none;"/>
<input type="text" id="Lsize2" runat="server" style="display:none;"/>
<input type="text" id="Tsize2" runat="server" style="display:none;"/>
<div class="backed">
<div class="block1"></div>
<div class="block2"></div>
<div class="block3"></div>
<div class="block4"></div>
<div class="block5"></div>
<div class="block6"></div>
<div class="block7"></div>
<div class="block8"></div>
</div>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
    </div>
    </form>
</body>