JSFiddle - React, Tailwind, and code Playground

by warlock5658

HTML

<div id="outer">
    <div id="in1"></div>
    <div id="in2"></div>    
</div>

<div id="t1"></div>

CSS

#outer{
    position: absolute;
    left: 0;
    width: 405px;
    height: 200px;
    border: 1px solid black;
}

#in1 {
    position: absolute;
    left: 0px;
    width: 200px;
    height: 200px;
    border: 1px solid red;
}

#in2 {
    position:absolute;
    width: 200px;
    height: 200px;
    border: 1px solid blue;
    left: 205px;
}

#t1{
    position: absolute;
    top: 75px;
    left: 50px;
    width: 100px;
    height: 20px;
    background-color: grey;
}

JavaScript

var dragging = false;
var lastE;

$('#t1').mousedown(function(e){
    dragging = true;
});

$('body').mousemove(function(e){
    lastE = e;  
}).mouseup(function(e){
    dragging = false;
});


var placeT = function placeT(e) {
    var newX = Math.round((e.pageX - 2)/20) * 20;
    var newY = Math.round((e.pageY - 2)/20) * 20;
    
    if(newX <= 100){
         $('#t1').offset({ left: newX });
    }else if(newX >= 220 && newX <= 300){
         $('#t1').offset({ left: newX });
    }else{
        
    }
     $('#t1').offset({ top: newY });
}

var drag = function drag() {
    if(dragging){
        placeT(lastE);
    }
    window.setTimeout(drag, 1);    
    
};
window.setTimeout(drag, 100);