每天一个JS 小demo之“拖拽”效果的实现。主要知识点：event
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">#wrap { position: relative; border: 1px solid #000; width: 800px; height: 500px;} #drog { position: absolute; left: 0; top: 0; width: 100px; height: 100px; background: red; cursor: move;}</style></head><body><div id="wrap"> <div id="drog"></div></div> <script type="text/javascript" src="startmove.js"></script><script type="text/javascript">(function(){ var drog = document.querySelector('#drog'); /* 1.记录按下的时候的鼠标位置 2.记录按下的时候元素的位置 */ drog.onmousedown = function(e){ var startElY = css(drog,"top"); var startElX = css(drog,"left"); var startMouseX = e.clientX; var startMouseY = e.clientY;
/* 求出鼠标移动的距离， 操作元素也移动相应的距离
为了可以一直跟随，所以添加给document */ document.onmousemove = function(e){ var nowMouseX = e.clientX; var nowMouseY = e.clientY; var disX = nowMouseX - startMouseX; var disY = nowMouseY - startMouseY; var x = disX + startElX; var y = disY + startElY; css(drog,"left",x); css(drog,"top",y); }; document.onmouseup = function(){ document.onmousemove = null; document.onmouseup = null; }; };})(); </script></body></html>