返回首页当前位置：首页 >> 网站建设 >> 正文

兼容IE firefox的拖拽对象

文章来自: | 发表时间:2007-9-13 20:45:31
1. <!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
3. <head>
4. <title> 代码实例：拖动对象 Drag Object (兼容:IE、Firefox、Opera ... )</title>
5. <meta http-equiv="content-type" content="text/html; charset=gb2312" />
6. <meta name="keywords" content="代码实例：拖动对象">
7. <meta name="description" content="最简短的拖动对象代码实例演示">
8. <style>
9. .dragAble {position:relative;cursor:move;}
10. </style>
11. <script language="javascript">
12. <!--
13. var ie=document.all;
14. var nn6=document.getElementById&&!document.all;
15. var isdrag=false;
16. var y,x;
17. var oDragObj;
18.
19. function moveMouse(e) {
20. if (isdrag) {
21. oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y)+"px";
22. oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x)+"px";
23. return false;
24. }
25. }
26.
27. function initDrag(e) {
28. var oDragHandle = nn6 ? e.target : event.srcElement;
29. var topElement = "HTML";
30. while (oDragHandle.tagName != topElement && oDragHandle.className != "dragAble") {
31. oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;
32. }
33. if (oDragHandle.className=="dragAble") {
34. isdrag = true;
35. oDragObj = oDragHandle;
36. nTY = parseInt(oDragObj.style.top+0);
37. y = nn6 ? e.clientY : event.clientY;
38. nTX = parseInt(oDragObj.style.left+0);
39. x = nn6 ? e.clientX : event.clientX;
40. document.onmousemove=moveMouse;
41. return false;
42. }
43. }
44. document.onmousedown=initDrag;
45. document.onmouseup=new Function("isdrag=false");
46. //-->
47. </script>
48. </head>
49. <body>
50. <img src="http://www.iecn.net/images/user_icons/2006/10/01/u_35653.gif" class="dragAble" / onclick="javascript:window.open(this.src);" style="cursor: pointer" alt="点此在新窗口浏览图片" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)">
51. <img src="http://www.iecn.net/images/user_icons/2006/10/01/u_35653.gif" class="dragAble" / onclick="javascript:window.open(this.src);" style="cursor: pointer" alt="点此在新窗口浏览图片" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)">
52. <img src="http://www.iecn.net/images/user_icons/2006/10/01/u_35653.gif" class="dragAble" / onclick="javascript:window.open(this.src);" style="cursor: pointer" alt="点此在新窗口浏览图片" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)"><br /><br />
53. <div style="border:1px solid #ff6d00;background:#ffd801;width:240px;padding:5px 0;" class="dragAble">这些都是可拖动对象</div>
54. </body>
55. </html>
相关文章 更多