<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br /><head><br /><title></title><br /><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><br /><style type="text/css"><br />*{margin:0;padding:0;}<br />body{background:#fff;font-size:12px;}<br />.drag_wrap{width:500px;height:300px;position:absolute;border:1px solid #ccc;display:none;z-index:3;background:#fff;}<br />.drag_wrap h1{position:relative;height:35px;line-height:35px;text-indent:1em;font-size:14px;cursor:move;font-weight:normal;background:#efefef;border-bottom:1px solid #ccc;}<br />.drag_wrap h1 span{position:absolute;font-size:12px;bottom:1px;right:10px;cursor:pointer;}<br />.drag_cont{padding:10px;line-height:23px;text-indent:2em;}<br />.mask{position:absolute;left:0;top:0;z-index:2;background:#000;filter:alpha(opacity=50);opacity: 0.5;}<br />.in{margin:50px auto;width:80px;}<br /></style><br /></head><br /><body><br /><div class="in"><input type="button" value="猛擊我" onclick="drag.init().move('drag')" /></div><br /><div class="in"><a href="###" onclick="drag.init('drag2').move('drag2')">鐵道部回應京滬高鐵頻出故障：裝置處於磨合期</a></div></p><p><div id="drag2" class="drag_wrap"><br /><h1>鐵道部回應京滬高鐵頻出故障<span>關閉</span></h1><br /><div class="drag_cont"><br /><p>各位網友好！首先我要感謝人民網強國論壇為我提供與廣大網友再聚的機會。在我來之前，看了許多網友的留言，其中就有一位網友提醒我要做好挨罵和挨拍的準備。是的，今天來到這裡，就是代表鐵路系統向大家真誠道歉、說明情況。京滬高鐵開通半個月以來，總體客流和服務情況是好的。但近幾天連續發生故障，影響列車正常運行</p><br /><p>6月30日，京滬高鐵開通運營。請您介紹一下總體運營情況，比如開行列車數量、運送旅客人數、正點率、安全情況等。</p><br /></div><br /></div></p><p><script type="text/javascript"><br />var drag = {<br />$: function(){ return document.getElementById(arguments[0]);},</p><p>/**<br /> * 得到視口的大小<br /> */<br />getWindowsSize: function(){<br />var de = document.documentElement,<br />pageWidth = window.innerWidth,<br />pageHeight = window.innerHeight;<br />if(typeof pageWidth != 'number'){ //如果pageWidth不是數字,則ie,非ie支援innerWidth<br />if(document.compatMode == 'CSS1Compat'){ //Standars mode 標準模式，完整dtd<br />pageWidth = de.clientWidth;<br />pageHeight = de.clientHeight;<br />} else { //如果是 Quirks mode<br />pageWidth = document.body.clientWidth;<br />pageHeight = document.body.clientHeight;<br />}<br />}<br />return {<br />width: pageWidth,<br />height: pageHeight<br />}<br />},</p><p>/**<br /> * 建立標籤<br /> * @param {String} target 標籤名稱，為空白則建立一個空的div<br /> * @param {Object} config 屬性列表<br /> */<br />createElement: function(target, config){<br />target = target || 'div';<br />config = config || {};</p><p>var tag = document.createElement(target);<br />for(var p in config){<br />if(p.toLowerCase() == 'style'){<br />tag.style.cssText = config[p];<br />} else if(p.toLowerCase() == 'class' || p.toLowerCase() == 'cls'){<br />tag.className = config[p];<br />} else if(p.toLowerCase() == 'innerHTML'){<br />tag.innerHTML = config[p];<br />} else {<br />tag.setAttribute(p, config[p]);<br />}<br />}<br />//此處try為釋放tag引用，否則建立的DOM永遠無法被釋放<br />try{<br />return tag;<br />} finally {<br />tag = null;<br />}<br />},</p><p>getEvent: function(event){<br />return event ? event : window.event;<br />},</p><p>init: function(id){<br />var that = this,<br />ele = this.$(id) || false,<br />winWidth = this.getWindowsSize().width,<br />winHeight = this.getWindowsSize().height;</p><p>if(!ele) {<br />ele = this.createElement('div', {<br />id: 'drag',<br />cls: 'drag_wrap'<br />});<br />var h1 = this.createElement('h1');<br />h1.innerHTML = '我是標題列';<br />var span = this.createElement('span');<br />span.innerHTML = '關閉';<br />var cont = this.createElement('div', {<br />cls: 'drag_cont'<br />});<br />cont.innerHTML = '<p>上半年，面對複雜多變的國際形勢和國內經濟運行出現的新情況新問題，黨中央、國務院堅持實施積極的財政政策和穩健的貨幣政策，不斷加強和改善宏觀調控，經濟運行總體良好，繼續朝著宏觀調控預期方向發展。</p><p>初步測算，上半年國內生產總值204459億元，按可比價格計算，同比增長9.6%；其中，一季度增長9.7%，二季度增長9.5%。分產業看，第一產業增加值15700億元，增長3.2%；第二產業增加值102178億元，增長11.0%；第三產業增加值86581億元，增長9.2%。從環比看，二季度國內生產總值增長2.2%。</p>';</p><p>h1.appendChild(span);<br />ele.appendChild(h1);<br />ele.appendChild(cont);<br />//ele.style.display = 'block';</p><p>document.body.appendChild(ele);</p><p>span.onclick = function(){<br />document.body.removeChild(ele);<br />document.body.removeChild(oMask);<br />}<br />} else {<br />var handler = ele.getElementsByTagName('h1')[0],<br />close = handler.getElementsByTagName('span')[0];</p><p>close.onclick = function(){<br />ele.style.display = 'none';<br />document.body.removeChild(oMask);<br />}<br />}</p><p>var oMask = this.createElement('div', {<br />cls: 'mask'<br />});<br />oMask.style.cssText = 'width:' + winWidth + 'px;height:' + winHeight + 'px;';</p><p>document.body.appendChild(oMask);</p><p>ele.style.display = 'block';<br />ele.style.left = (winWidth - ele.offsetWidth)/2 + 'px';<br />ele.style.top = (winHeight - ele.offsetHeight)/2 + 'px';</p><p>return this;<br />},</p><p>move: function(id){<br />var that = this,<br />ele = this.$(id),<br />winWidth = this.getWindowsSize().width,<br />winHeight = this.getWindowsSize().height,<br />posx,<br />poy;</p><p>if(!ele) return false;</p><p>var handler = ele.getElementsByTagName('h1')[0],<br />close = handler.getElementsByTagName('span')[0];<br />handler.onmousedown = function(e){<br />evt = that.getEvent(e);<br />posx = evt.clientX - parseInt(ele.style.left);<br />posy = evt.clientY - parseInt(ele.style.top);</p><p>if (handler.setCapture) { //防止ie下拖動過快丟失對象<br /> handler.setCapture();<br /> } else if (window.captureEvents) {<br /> window.captureEvents(e.MOUSEMOVE | e.MOUSEUP);<br /> }</p><p>document.onmousemove = function(e){<br />e = that.getEvent(e);<br />var l = e.clientX - posx,<br />t = e.clientY - posy;</p><p>if(l < 0){<br />l = 0;<br />} else if(l > winWidth - ele.offsetWidth){<br />l = winWidth - ele.offsetWidth;<br />}</p><p>if(t < 0){<br />t = 0;<br />} else if(t > winHeight - ele.offsetHeight){<br />t = winHeight - ele.offsetHeight;<br />}</p><p>ele.style.left = l + 'px';<br />ele.style.top = t + 'px';</p><p>window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); //取消選擇文本<br />}<br />return false; //感謝清流魚提出解決辦法<br />};</p><p>document.onmouseup = function(e){<br />e = that.getEvent(e);</p><p>if (handler.releaseCapture) {<br /> handler.releaseCapture();<br /> } else if (window.captureEvents) {<br /> window.captureEvents(e.MOUSEMOVE | e.MOUSEUP);<br /> }</p><p>document.onmousemove = null;<br />};</p><p>return this;<br />},</p><p>close: function(id){<br />var that = this,<br />ele = this.$(id);</p><p>if(!ele) return false;<br />ele.style.display = 'none';<br />}<br />}</p><p></script><br /></body><br /></html>
chorme下cursor:move樣式丟失，感謝清流魚提出解決辦法，但還未搞清原理，記之。
運行代碼
