JavaScript实现的简单拖拽效果

这篇文章主要介绍了JavaScript实现的简单拖拽效果,涉及javascript针对鼠标事件与页面样式的操作技巧,需要的朋友可以参考下

本文实例讲述了JavaScript实现的简单拖拽效果。分享给大家供大家参考。具体实现方法如下：

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
3. <html xmlns="http://www.w3.org/1999/xhtml"> 
4. <head> 
5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
6. <title>javascript拖拽</title> 
7. <style> 
8. .test{ 
9. text-align:center; 
10. width:300px; 
11. height:30px; 
12. line-height:30px; 
13. background:#f60; 
14. position:absolute; 
15. } 
16. .test:hover{ 
17. cursor:move; 
18. } 
19. </style> 
20. </head> 
21. <body> 
22. <script src="jquery-1.6.2.min.js"></script> 
23. <div class="test">jb51拖拽测试</div> 
24. <br/><br/> 
25. <h1>如果无效请刷新下页面..</h1> 
26. <script> 
27. ;$(function(){ 
28. var isMove=false; 
29. $(".test").mousedown(function(){isMove=true;}).mouseup(function(){isMove=false;}); 
30. $(document).mousemove(function(e){ 
31. if(!isMove){return;}; 
32. var X=e.clientX-parseInt($(".test").width()/2); 
33. var Y=e.clientY-parseInt($(".test").height()/2); 
34. $(".test").css({"left":X,"top":Y,"cursor":"move"}); 
35. }); 
36. }); 
37. </script> 
38. </body> 
39. </html> 

希望本文所述对大家的javascript程序设计有所帮助。