當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

一个简单的拖动层(兼容IE,FF)

發布時間：2024/4/15 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了一个简单的拖动层(兼容IE,FF) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Code
<!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>
????<title>拖動層</title>
????<style?type="text/css">
????.main
????{
????????position:?absolute;?
????????background-color:?#fff;
????????top:?100px;?
????????left:?100px;?
????????z-index:?101;?
????????border:?solid?1px?#ccc;
????}
????.titlebar
????{
????????background-color:?#ccc;?
????????cursor:?move;?
????????height:?20px;?
????????color:?#fff;
????????font-size:?13px;?
????????padding-top:?5px;?
????????padding-left:?10px;
????}
????</style>
</head>
<body>
????<div?id="main"?class="main"?style="width:?500px;?height:?350px;">
????????<div?id="titlebar"?class="titlebar">
????????????拖動層
????????</div>
????????<div?id="Div1"?class="main"?style="width:?200px;?height:?50px;">
????????????<div?id="Div2"?class="titlebar">
????????????????拖動層2
????????????</div>
????????</div>
????</div>

????<script?type="text/javascript">
????????new?drag("main",?"titlebar");
????????new?drag("Div1",?"Div2");

????????function?drag(main,?titlebar)?{
????????????var?obj?=?document.getElementById(main);
????????????var?title?=?document.getElementById(titlebar);
????????????if(obj?&&?title)
????????????{????????????
????????????????var?posX;
????????????????var?posY;
????????????????var?offset?=?10;
????????????????var?mousemove?=?function(evt)?{
????????????????????if?(evt?==?null)?evt?=?window.event;
????????????????????var?left?=?evt.clientX?-?posX;
????????????????????var?top?=?evt.clientY?-?posY;
????????????????????var?limitLeft?=?0;
????????????????????var?limitTop?=?0;
????????????????????if(obj.parentNode.nodeName?!=?"BODY")
????????????????????{
????????????????????????limitLeft?=?obj.parentNode.clientWidth?-?obj.clientWidth?-?offset;
????????????????????????if(limitLeft?<?left)
????????????????????????{
????????????????????????????left?=?limitLeft;
????????????????????????}
????????????????????????limitTop?=?obj.parentNode.clientHeight?-?obj.clientHeight?-?offset;
????????????????????????if(limitTop?<?top)
????????????????????????{
????????????????????????????top?=?limitTop;
????????????????????????}
????????????????????}
????????????????????else
????????????????????{
????????????????????????limitLeft?=?window.screen.availWidth?-?obj.clientWidth?-?offset;
????????????????????????if(limitLeft?<?left)
????????????????????????{
????????????????????????????left?=?limitLeft;
????????????????????????}
????????????????????????limitTop?=?window.screen.availHeight?-?obj.clientHeight?-?offset;
????????????????????????if(limitTop?<?top)
????????????????????????{
????????????????????????????top?=?limitTop;
????????????????????????}
????????????????????}
????????????????????if(left?<?offset)
????????????????????{
????????????????????????left?=?offset;
????????????????????}
????????????????????if(top?<?offset)
????????????????????{
????????????????????????top?=?offset;
????????????????????}
????????????????????obj.style.left?=?left?+?"px";
????????????????????obj.style.top?=?top?+?"px";
????????????????}
????????????????
????????????????title.onmousedown?=?function(evt)?{
????????????????????if?(!evt)?evt?=?window.event;
????????????????????posX?=?evt.clientX?-?obj.offsetLeft;
????????????????????posY?=?evt.clientY?-?obj.offsetTop;
????????????????????document.onmousemove?=?mousemove;
????????????????}

????????????????document.onmouseup?=?function()?{
????????????????????document.onmousemove?=?null;
????????????????}
????????????}
????????????else
????????????{
????????????????alert("參數錯誤!");
????????????}
????????}
????</script>

</body>
</html>

轉載于:https://www.cnblogs.com/KenBlove/archive/2009/06/05/1497078.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的一个简单的拖动层(兼容IE,FF)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。