JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<div class="box"></div>
<div class="result"></div>
<div class="box1"></div>
<div class="result1"></div>
<button type="button" onclick="myFunction()" style="position:relative; top:70px;">Submit</button>

<script>
    
var reverting = false;
var reverting1= false;
var x4,x5;

$(".box").draggable({
    axis: "x",
    drag: function(event, ui) {
        var y2 = ui.position.top;
        var x2 = ui.position.left;

        $('.result').text(x2);
         x4=x2;
        
        if (reverting){
            event.preventDefault();
            event.stopImmediatePropagation();
        } else if (x2 > 100) {
            reverting = true;
            revertDrag($('.box'));
        }
        else if (x2<0) {
                  }
    }
});

function revertDrag(element){
    element.draggable('disable');
    element.animate({
        top: 0,
    }, {
        duration: 500,
        
        complete: function() {
            reverting = true;
            element.draggable('enable');
            
           
        }
    })
   
}


$(".box1").draggable({
    axis: "x",
    drag: function(event, ui) {
        var y3 = ui.position.top;
        var x3 = ui.position.left;
        $('.result1').text(x3);
        x5=x3; 
        
       
       
        if (reverting1){
            event.preventDefault();
            event.stopImmediatePropagation();
        } else if (x3 > 200) {
            reverting1 = true;
            revertDrag1($('.box1'));
            alert("this is incorrect");
        }
        else if (x3<40) {
           
           }
    }
});

function revertDrag1(element){
    element.draggable('disable');
    element.animate({
        top:40,
    }, {
        duration: 500,
        
        complete: function() {
            reverting1 = false;
            element.draggable('enable');
...

CSS

.box {
    width:20px;
    height:10px;
    background:blue;
}
.box1 {
    width:20px;
    height:10px;
    position:relative;
    top:40px;
    background:black;
}
.result {
    position:fixed;
    top:20px;
}
.result1 {
    position:fixed;
    top:70px;
}