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;
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 = x.clientX-50drop.offsetLeft + 'px';*/
/*drop.style.top = x.clientY-50drop.offsetTop + 'px';*/
//alert(x.clientX-(x.clientX-drop.offsetLeft))
drop.style.left = x.clientX-50 + 'px';
drop.style.top = x.clientY-50/*x.clientY-(x.clientY-drop.offsetHeight)*/ + 'px';
}
}
function down(e){
if(!window.addEventListener){
this.setCapture();
}/**/
flug = true;
}
function up(e){
if(!window.addEventListener){
this.releaseCapture();
}/**/
flug = false;
}
function dragStop( e ) {
e.preventDefault();
e.stopPropagation();
return false;
}