原生JavaScript实现拖拽效果
2014.07.12
JerryC
搬砖码农
 热度
℃
前言
闲着无事干,突然想做一个类Q+ Web桌面的东西,当然那是一个大工程(对本菜鸟来说)。那么,这个Demo就是第一步,起码可以实现图标的拖拽效果。
截图:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113
| <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Drag Demo</title> <style> body{ background:url(images/bg.jpg) no-repeat; background-size:100%; padding: 20px ; } .icon{ width: 100px;height: 100px;margin-bottom:15px;position: absolute;cursor: move; } .icon-0{ background: url("images/png/0.png") no-repeat;background-size: 100%; top: 20px; left: 20px; } .icon-1{ background: url("images/png/1.png") no-repeat;background-size: 100%; top: 140px; left: 20px; } .icon-2{ background: url("images/png/2.png") no-repeat;background-size: 100%; top: 260px; left: 20px; } .icon-3{ background: url("images/png/3.png") no-repeat;background-size: 100%; top: 380px; left: 20px; } .icon-4{ background: url("images/png/4.png") no-repeat;background-size: 100%; top: 500px; left: 20px; }
</style> </head>
<body> <div class="icon icon-0"></div> <div class="icon icon-1"></div> <div class="icon icon-2"></div> <div class="icon icon-3"></div> <div class="icon icon-4"></div> </body>
<script type="text/javascript"> function g(el){ return document.getElementsByClassName(el);}
var icons = g('icon'); var instace = false;
for(var i =0 ; i<icons.length ; i++){ if(icons[i]) { icons[i].addEventListener('mousedown', function (e) {
instace = {}; var e = e || window.event; var el = e.toElement || e.target; console.log(e); instace.moveElement = el;
var mouseX = e.pageX; var mouseY = e.pageY;
var elX = el.offsetLeft; var elY = el.offsetTop;
instace.offSetX = mouseX - elX; instace.offSetY = mouseY - elY;
instace.moveElement.style.zIndex = 9000; }); } }
document.onmouseup = function(e){ instace.moveElement.style.zIndex = 2; instace = false; };
document.onmousemove = function(e){
if(instace){
var mouseX = e.pageX; var mouseY = e.pageY;
var moveX = mouseX - instace.offSetX; var moveY = mouseY - instace.offSetY;
var maxX = document.documentElement.clientWidth - instace.moveElement.offsetWidth; var maxY = document.documentElement.clientHeight - instace.moveElement.offsetHeight;
instace.moveElement.style.left = Math.max(0,Math.min(maxX,moveX)) + 'px'; instace.moveElement.style.top = Math.max(0,Math.min(maxY,moveY)) + 'px'; } }; </script> </html>
|
演示地址:http://jerryc8080.github.io/dragDemo/
项目地址:https://github.com/JerryC8080/dragDemo/