draggin.min.js

document.body.onload=function(){var e=".draggable{cursor: move;display: inline-block;} .text{display: inline-block; cursor: move;} .text:focus{cursor: auto;} .text-wrapper{width: 100%;position: relative;} .wrap{position: absolute;margin: auto;top: 0;bottom: 0;left: 0;right: 0;}';",t=document.createElement("style");t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e)),document.getElementsByTagName("head")[0].appendChild(t);var n,o,i=document.querySelectorAll(".draggable"),a=document.querySelectorAll(".text");z=1,editing=!1;var r=null;function s(e){event.target.classList.contains("text")||(editing=!1,editing&&n.blur())}document.body.addEventListener("mousedown",s),document.body.addEventListener("touchstart",s);for(var d=0;d<i.length;d++)i[d].addEventListener("mousedown",c),i[d].addEventListener("touchstart",f),b=i[d].getBoundingClientRect(),i[d].initialOffsetX=b.left+window.pageXOffset,i[d].initialOffsetY=b.top+window.pageYOffset,i[d].x=b.left,i[d].y=b.top,i[d].style.cursor="move",document.addEventListener("mouseup",g),document.addEventListener("touchend",g);for(let e=0;e<a.length;e++){var l;a[e].addEventListener("dblclick",u),(l=document.createElement("div")).className="text-wrapper",a[e].parentNode.insertBefore(l,a[e]),l.appendChild(a[e]),l.style.height=p(a[e])+"px",(l=document.createElement("div")).className="wrap",a[e].parentNode.insertBefore(l,a[e]),l.appendChild(a[e]),a[e].contentEditable="true"}function u(e){n=e.target,editing=!0,n.focus()}function f(e){e.preventDefault(),c(e),null==r?r=setTimeout(function(){r=null},500):(clearTimeout(r),r=null,u(e))}function c(e){if(e.target.classList.contains("text")||(editing=!1,editing&&n.blur()),!editing){e.preventDefault(),moving=!0,z+=1,(o=e.target).attributeName="test",b=o.getBoundingClientRect();var t=b.left+window.pageXOffset,i=b.top+window.pageYOffset;offsetX=e.pageX||e.changedTouches[0].pageX,offsetY=e.pageY||e.changedTouches[0].pageY,document.addEventListener("mousemove",function(e){if(!0===moving){var n="transform: translate("+(e.pageX-offsetX+t-o.initialOffsetX)+"px, "+(e.pageY-offsetY+i-o.initialOffsetY)+"px);z-index:"+z+";";o.setAttribute("style",n)}}),document.addEventListener("touchmove",function(e){var n=e.changedTouches;if(!0===moving)for(let e=0;e<n.length;e++){var a="transform: translate("+(n[e].pageX-offsetX+t-o.initialOffsetX)+"px, "+(n[e].pageY-offsetY+i-o.initialOffsetY)+"px);z-index:"+z+";";o.setAttribute("style",a)}})}}function g(e){moving=!1}function p(e){var t=e.offsetHeight,n=getComputedStyle(e);return t+=parseInt(n.marginTop)+parseInt(n.marginBottom)}};