(function(){ function getStyle(elem){ return getComputedStyle(elem); } function parsePx(str){ if(/px/.test(str)){ str = str.replace(/px/,''); } return parseFloat(str); } var drag = document.querySelector('.drag'); var top, left, currentX, currentY, moving = false; drag.onmousedown = function(event){ var css = getStyle(drag); top = parsePx(css.top); left = parsePx(css.left); //console.log('down',top,left); currentX = event.clientX; currentY = event.clientY; moving = true }; document.onmouseup = function(event){ //console.log('up'); moving = false; currentX = currentY = top = left =0; }; drag.onmousemove = function(event){ if(!moving)return; drag.style.top = top + (event.clientY - currentY) + 'px'; drag.style.left = left + (event.clientX - currentX) + 'px'; }; drag.onmouseleave = function(event){ moving = false; currentX = currentY = top = left =0; }; })()
<div id="app"> <div class="drag"></div> </div>
#app{ width: 800px; margin:50px auto; position: relative; } .drag{ position: absolute; top: 20px; left: 30px; cursor: crosshair; border: 1px solid #000; padding: 5px; width:20px; height:20px; background-color:red; }