JSFiddle - React, Tailwind, and code Playground
HTML
<!doctype html>
<html>
<head>
<title>
TZDragg
</title>
<style>
#elem{
position: absolute;
width: 150px;
height: 150px;
padding:5px;
border: 1px solid black;
background-color: yellow;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
cursor: default;
}
</style>
<script>
// Coded by TheZillion in a quarter of an hour. [thezillion.wordpress.com]
function $(el){
return document.getElementById(el);
}
var tzdragg = function(){
return {
move : function(divid,xpos,ypos){
var a = $(divid);
$(divid).style.left = xpos + 'px';
$(divid).style.top = ypos + 'px';
},
startMoving : function(evt){
evt = evt || window.event;
var posX = evt.clientX,
posY = evt.clientY,
a = $('elem'),
divTop = a.style.top,
divLeft = a.style.left;
divTop = divTop.replace('px','');
divLeft = divLeft.replace('px','');
var diffX = posX - divLeft,
diffY = posY - divTop;
document.onmousemove = function(evt){
evt = evt || window.event;
var posX = evt.clientX,
posY = evt.clientY,
aX = posX - diffX,
aY = posY...