JSFiddle - React, Tailwind, and code Playground

by zlojnaxa

HTML

<div id="DnD_el4" style="position:absolute; cursor:move; padding:5px; left:0px; top:0px;">голый текст, берём,<br>и тоже тащим</div>
<button id="saveCoord">Сохранить</button>

JavaScript

(function(){
	saveCoord();
	function saveCoord(){
		var element = document.getElementById('DnD_el4');
		var localCoord = localStorage.getItem('localCoord');

		document.getElementById('saveCoord').addEventListener('click',()=> {
			localStorage.setItem('localCoord',`${window.getComputedStyle(element,null).getPropertyValue`left`}/${window.getComputedStyle(element,null).getPropertyValue`top`}`);
		});
		if(localCoord !== null){
			element.style.left = localCoord.split('/')[0];
			element.style.top = localCoord.split('/')[1];
		}
	}

	var elY, elX, obj, zIn = 5, d;
	d = document;
	d.onmousedown = press;
	d.onmouseup = release;
	function press(ev){
		if(ev){
			obj = ev.target;
			if(obj.id.indexOf("DnD_el") == 0){
				d.onmousemove = elemMove;
				elX = ev.clientX - obj.offsetLeft;
				elY = ev.clientY - obj.offsetTop;
			}
		}
		else{
			obj = event.srcElement;
			if(obj.id.indexOf("DnD_el") == 0){
				d.onmousemove = elemMove;
				elY = event.offsetY;
				elX = event.offsetX;
			}
		}
		obj.style.zIndex = zIn++;
		return false;
	}

	function elemMove(ev){
		var y, x;
		if(ev){
			x = ev.clientX;
			y = ev.clientY;

		}
		else{
			x = event.clientX + (d.documentElement.scrollLeft || d.body.scrollLeft);
			y = event.clientY + (d.documentElement.scrollTop || d.body.scrollTop);

		}
		obj.style.left = x - elX + 'px';
		obj.style.top = y - elY + 'px';
		// d.getElementById("coord").innerHTML = (y - elY) + ' ' + (x - elX);
		return false;
	}

	function release(){
		d.onmousemove = null;
	}

})();