JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sky">
    <div id="draggable">
        
    </div>
</div>


<div id="droppable">
    <p></p>
</div>

CSS

#sky
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 731px;
    overflow: hidden;
}
#draggable
{
    position: absolute;
    background: #000;
    left: 1%;
    top: 155px;
    z-index: 2;
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
}

#droppable {background: #dc50d4; width: 75px; height: 75px;  }

JavaScript

$(document).ready(function() {
    $(init);
});

var cloudMoved = false;

function init() {
    cloudMove();
}

function cloudMove() {
    if (!cloudMoved) {
        $("#draggable").css("left", $("#draggable").offset().left);
    }
    $("#draggable").animate({
        left: $("#sky").width()
    }, cloudMoved ? 18000 : 15000, "linear", function() {
        $(this).css("left", -parseInt($(this).css("width")));
        cloudMoved = true;
        cloudMove();
    });
}

$("#draggable").draggable({
    start: function() {
        $(this).stop();
    },
    stop: function(){
         cloudMove();   
    }
});
$("#droppable").droppable({
    accept: "#draggable",
    activeClass: "ui-state-hover",
    hoverClass: "ui-state-active",
    drop: function(event, ui) {
        $(this).addClass("ui-state-highlight").find("p").html("Dropped!");
    }
});