实现javascript拖放应用
今天下午学习javascript时,根据学到的知识和搜索的资料,自己完成了一个基于javascript的拖放应用程序。
包含三个文件:1、drag.css;2、drag.js;3、index.html
主要是drag.js文件,现在谈一谈自己完成的过程:先找到图片在它所包含的盒子里的位置x1,然后找出鼠标相对于客户端窗口的位置x2,用x1-x2得到图片对象相对于窗口的位置x3;当鼠标点击图片拖动的时候捕获鼠标移动的位置(就是现在鼠标相对于客户端窗口的水平和垂直距离)x4,再用x4-x3就得到图片当前的移动的距离。
1. //<![CDATA[
2. var dragObj = null ; //拖放的对象
3. var mouseOffset = null ; //拖放对象的偏移位置
4.
5. //捕获鼠标的事件
6. document.onmousemove = mouseMove;
7. document.onmouseup = mouseUp;
8.
9. //设置x,y
10. function MousePoint(x,y){
11. this.x = x;
12. this.y = y;
13. }
14. //创建鼠标位置
15. function mousePosition(evnt){
16. var x= parseInt(evnt.clientX);
17. var y= parseInt(evnt.clientY);
18. return new MousePoint(x,y);
19. }
20. //获取对象的页面偏移量
21. function getMouseOffset(target,evnt){
22. var theEvent = evnt ? evnt : window.event;
23. var mousePos = mousePosition(theEvent);
24.
25. var x = mousePos.x - target.offsetLeft;
26. var y = mousePos.y - target.offsetTop;
27. return new MousePoint(x,y);
28. }
29.
30. //对象拖动时捕获鼠标位置
31. function mouseMove(evnt){
32. var theEvent = evnt ? evnt : window.event;
33. var mousePos = mousePosition(theEvent);
34.
35. if(dragObj){
36. dragObj.style.position = 'absolute';
37.
38. dragObj.style.top = mousePos.y - mouseOffset.y + 'px';
39. dragObj.style.left = mousePos.x - mouseOffset.x + 'px';
40.
41. }
42. }
43.
44. //停止拖放
45. function mouseUp(){
46. dragObj = null;
47. }
48.
49. //可以拖放的对象
50. function makeDrag(item){
51. item = document.getElementById(item);
52. item.onmousedown = function(evnt){
53. dragObj = this;
54. mouseOffset = getMouseOffset(this,evnt);
55. return false;
56. }
57. }
58. //载入对象 www.zzzyk.com
59. window.onload = function(){
60. makeDrag('img1');
61. }
62. //]]>
效果图:
摘自 沙漠的蜗牛80
补充:web前端 , JavaScript ,