开发学院网页设计 JavaScript JavaScript页面内拖拽原理分析阅读

JavaScript页面内拖拽原理分析

　2010-11-13 08:04:44　来源：WEB开发网　闂傚倷绶氬ḿ褍螞閹绢喖绠柨鐕傛嫹

闂傚倷绀侀幉锟犲垂閻㈠灚宕查柟鎵閸庡秵銇勯幒鎴濃偓鐢稿磻閹炬枼妲堟繛鍡楃С濞岊亞绱撻崒姘扁枌闁瑰嚖鎷�

婵犵數濮幏鍐川椤撴繄鎹曢梻渚€娼уú銈吤洪妸鈺佺劦妞ゆ帊鑳堕埊鏇㈡煏閸モ晛浠х紒杈╁仱閺佹捇鏁撻敓锟�闂傚倷绶氬ḿ褍螞閹绢喖绠柨鐕傛嫹　　闂傚倷鑳舵灙缂佺粯顨呴埢宥夊即閵忕姵鐎梺缁樺姇閹碱偆鐥閺屾洘绻濊箛鏇犵獥闂佺厧澹婃禍婊堚€旈崘顏佸亾閿濆骸澧ù鐘欏嫮绠鹃柛顐ゅ枎閻忋儲銇勯弴妯哄姦妞ゃ垺鐟╅幃鈩冩償閵囧府鎷�

核心提示： HTML代码<div id="test" style="border:1px solid; width:400px; background:#CCCCCC;"> <p>我是拖拽示例DIV，</p> <p>可以试验一下效

HTML代码

<div id="test" style="border:1px solid; width:400px; background:#CCCCCC;">   
　　 <p>我是拖拽示例DIV。</p>   
　　 <p>可以试验一下效果。</p>   
　 </div>

演示代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">         <html xmlns="http://www.w3.org/1999/xhtml">         <head>         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />         <title>JavaScript拖拽示例网页</title>         <mce:script type="text/javascript"><!--          var dragging = false;        var test;        var mouseY;        var mouseX;        window.onload = function(){           test = document.getElementById("test");           test.onmousedown = down;           test.onmousemove = move;           document.onmouseup = up;           test.style.position = "relative";           test.style.top = "0px";           test.style.left = "0px";        }        function down(event)        {           eventevent = event || window.event;            dragging = true;            mouseX = parseInt(event.clientX);           mouseY = parseInt(event.clientY);           objY = parseInt(test.style.top);           objX = parseInt(test.style.left);        }        function move(event){           eventevent = event || window.event;            if(dragging == true){               var x,y;               y = event.clientY - mouseY + objY;               x = event.clientX - mouseX + objX;               test.style.top = y + "px";               test.style.left = x + "px";           }        }        function up(){           dragging = false;        }        // --></mce:script>         </head>                  <body>         <div id="test" style="border:1px solid; width:400px; background:#CCCCCC;">           <p>我是拖拽示例DIV。</p>           <p>可以试验一下效果。</p>         </div>          </body>         </html>

缺点与待完善之处

这个拖拽的例子还相当不完善，不过已经实现了拖拽最根本的核心。想到的待完善部分有下面几点：获得元素的x与y坐标的方法在本文里简化掉了;本文只让一个固定的元素具有了拖拽功能，灵活性太差;鼠标样式没有变换;快速的“乱甩拖拽”有一定概率出现问题。其中最后一个问题暂时不知道怎么解决，前面三个比较好办。

上一页 1 2