JSFiddle - React, Tailwind, and code Playground
HTML
<div id="wrap"></div>
CSS
#wrap {
position: absolute;
width: 100px;
height: 100px;
background: red;
left: 200px;
top: 200px;
}
JavaScript
var drop = document.getElementById('wrap');
var test = document.getElementById('test');
var flug = false;
var docPosX = 0;
var docPosY = 0;
if(window.addEventListener){
//document.ondragstart = function() { return false }
//document.body.onselectstart = function() { return false }/**/
document.addEventListener('mousemove',move, false);
drop.addEventListener('mouseup',up, false);
drop.addEventListener('mousedown',down, false);
drop.addEventListener('dragstart',dragStop, false);
}else {
drop.attachEvent('onmousedown',(function(e){
return function(){down.call(e);}
}(drop)))
drop.attachEvent('onmouseup',(function(e){
return function(){up.call(e);}
}(drop)))
document.attachEvent('onmousemove',(function(e){
return function(){move.call(e);}
}(document)))
}
function move(e){
var x;
if(!window.addEventListener){
x = window.event;
}else {x = e;}/**/
if(flug){
drop.style.left = (drop.offsetLeft + (x.clientX - drop.offsetLeft)) - (docPosX) + 'px';
drop.style.top = (drop.offsetTop + (x.clientY - drop.offsetTop)) - (docPosY) + 'px';
}
}
function down(e){
if(!window.addEventListener){
this.setCapture();
}/**/
flug = true;
docPosX = e.clientX - drop.offsetLeft;
docPosY = e.clientY - drop.offsetTop;
}
function up(e){
if(!window.addEventListener){
this.releaseCapture();
}/**/
flug = false;
}
function dragStop( e ) {
e.preventDefault();
e.stopPropagation();
return false;
}