JavaScript js div層拖拽(相容IE6、FF)

來源:互聯網
上載者:User

最近在論壇裡經常看到有人問div拖拽層的問題。根據其中的一個文章上的代碼,本人稍作修改。現在功能已經實現,並且相容FF、IE。代碼如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br /><html><br /> <head><br /> <title>dragDiv.html</title></p><p> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><br /> <meta http-equiv="description" content="this is my page"><br /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"><br /><style type="text/css"><br />body {<br />font-family:Verfana;<br />font-size:11px;<br />color:#333333;<br />}<br />#win {<br />position:absolute;<br />left:50px;<br />top:50px;<br />width:200px;<br />height:150px;<br />border:1px solid #000000;<br />background:yellow;<br />}<br /></style><br /><script type="text/javascript"><br />var win;<br />var left = 50;<br />var top = 50;<br />var move = false;<br />function init() {<br /> win = document.getElementById("win");<br /> win.onmousedown = startDrag;<br /> win.onmousemove = drag;<br /> win.onmouseup = stopDrag;<br />}</p><p>window.onload = init;</p><p>function startDrag(event) {<br />event = event || window.event;<br />var x = event.pageX || event.x;<br /> var y = event.pageY || event.y;<br /> left = x - left;<br /> top = y - top;<br /> win.style.background = "red";<br /> move = true;<br />}</p><p>function drag(event) {<br /> if(move) {<br />event = event || window.event;<br /> win.style.background = "blue";<br /> var x = event.pageX || event.x;<br /> var y = event.pageY || event.y;<br /> win.style.left = x - left + "px";<br /> win.style.top = y - top + "px";<br /> //captureEvents();<br /> //win.setCapture();<br /> if (!window.captureEvents) {<br /> win.setCapture();<br />} else {<br />captureEvents();<br /> //window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);<br />}<br /> }<br />}</p><p>function stopDrag(event) {<br />event = event || window.event;<br /> win.style.background="yellow";<br /> var x = event.pageX || event.x;<br /> var y = event.pageY || event.y;<br /> left = x - left;<br /> top = y - top;<br /> move = false;<br /> //routeEvent();<br /> //win.releaseCapture();<br /> if (!window.releaseEvents) {<br /> win.releaseCapture();<br />} else {<br />releaseEvents();<br /> //window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);<br />}<br />}<br /></script><br /> </head></p><p><body><br /><div id="win"><br /></div><br /></body><br /></html><br />

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.