<div id="mover" draggable="true" ondragstart="dragboxstart(event)" ondragend="dragboxend(event)">Drag Me</div> <script> var startpos; function dragboxstart(ev) { startpos = [ev.screenX, ev.screenY]; ev.dataTransfer.setData("text/plain", ev.target.id); } function dragboxend(ev) { var el = document.querySelector("#mover"); var style = window.getComputedStyle(el, null); var endpos = [ev.screenX, ev.screenY]; el.style.top = Number(style.top.replace("px", '')) + (endpos[1] - startpos[1]) + "px"; el.style.left = Number(style.left.replace("px", '')) + (endpos[0] - startpos[0]) + "px"; } </script>
#mover { position: absolute; width: 150px; height: 150px; background-color: #bada55; padding: 10px; cursor: move; }