最近在论坛里经常看到有人问div拖拽层的问题。根据其中的一个帖子上的代码，本人稍作修改。现在功能已经实现，并且兼容FF、IE。代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>dragDiv.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> body { font-family:Verfana; font-size:11px; color:#333333; } #win { position:absolute; left:50px; top:50px; width:200px; height:150px; border:1px solid #000000; background:yellow; } </style> <script type="text/javascript"> var win; var left = 50; var top = 50; var move = false; function init() { win = document.getElementById("win"); win.onmousedown = startDrag; win.onmousemove = drag; win.onmouseup = stopDrag; } window.onload = init; function startDrag(event) { event = event || window.event; var x = event.pageX || event.x; var y = event.pageY || event.y; left = x - left; top = y - top; win.style.background = "red"; move = true; } function drag(event) { if(move) { event = event || window.event; win.style.background = "blue"; var x = event.pageX || event.x; var y = event.pageY || event.y; win.style.left = x - left + "px"; win.style.top = y - top + "px"; //captureEvents(); //win.setCapture(); if (!window.captureEvents) { win.setCapture(); } else { captureEvents(); //window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); } } } function stopDrag(event) { event = event || window.event; win.style.background="yellow"; var x = event.pageX || event.x; var y = event.pageY || event.y; left = x - left; top = y - top; move = false; //routeEvent(); //win.releaseCapture(); if (!window.releaseEvents) { win.releaseCapture(); } else { releaseEvents(); //window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP); } } </script> </head> <body> <div id="win"> </div> </body> </html>
posted on 2010-07-02 10:50 java课程设计 阅读(234) 评论(0) 收藏 举报
浙公网安备 33010602011771号