实现DIV拖动
Ajax的到來讓B/S中的客戶端中開發(fā)有火了一把，網(wǎng)上出現(xiàn)了很多優(yōu)秀的開源框架和UI，比較著名了有prototype，YUI，GWT等，但很多時(shí)候發(fā)現(xiàn)這些東西很難用到你的系統(tǒng)之中，有時(shí)候你的系統(tǒng)僅僅需要實(shí)現(xiàn)一兩個(gè)UI功能，如果把整個(gè)架構(gòu)都引入進(jìn)來是不現(xiàn)實(shí)的。所以很多時(shí)候是需要自己動(dòng)手去做一些工作。 現(xiàn)在彈出窗口在B/S系統(tǒng)中很受青睞，它有美觀性和易用性等諸多特點(diǎn)，比如我用的sina 博客登陸窗口就是應(yīng)用了彈出窗口。以前我們做彈出窗口只用一個(gè)window.open()搞定，但后來發(fā)現(xiàn)這種窗口有很多弊端，首先是界面的美觀性差，其次是與主頁面的交互性差（只有一個(gè)window.opener引用主頁面）。所以在開發(fā)過程中要自己動(dòng)手做一些這方面的事情。 于是很多人選擇了用Div來實(shí)現(xiàn)但出窗口功能，用css來控制外觀。但是，這對(duì)開發(fā)人員提出更高要求：窗口的定位、拖動(dòng)、與主頁面的交互等。。。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
.winFrame{position:absolute;border: outset gray 1px;height:400;width:500;
}
.winTitle{position:absolute;border-bottom:1px solid black;width:100%;height:20px;cursor:move;
}
.winContent{position:absolute;top:30px;width:100%padding: 10px;overflow: auto;
}
</style>
<SCRIPT LANGUAGE="JavaScript">function beginDrag(elem,event){var deltaX = event.clientX - parseInt(elem.style.left);var deltaY = event.clientY - parseInt(elem.style.top);document.attachEvent("onmousemove",moveHandler);document.attachEvent("onmouseup",upHandler);event.cancelBubble = true;event.returnValue = false;function moveHandler(e){if(!e)e = window.event;elem.style.left = (e.clientX - deltaX) + "px";elem.style.top = (e.clientY - deltaY) + "px";e.cancelBubble = true;}function upHandler(e){if(!e)e = window.event;document.detachEvent("onmousemove",moveHandler);document.detachEvent("onmouseup",upHandler);e.cancelBubble = true;}}
</SCRIPT>
</HEAD><div class="winFrame" style="left:50px;top:50px;"><div class="winTitle" onmousedown="beginDrag(this.parentNode,event);"> 標(biāo)題 </div><div class="winContent">內(nèi)容</div></div>
<BODY>
</BODY>
</HTML>
?
轉(zhuǎn)載于:https://www.cnblogs.com/sherlockholmes/p/5286966.html
總結(jié)
- 上一篇： PCB SI9000阻抗计算引擎Web方
- 下一篇： 0day的NFO文件名的含义大全