JSFiddle - React, Tailwind, and code Playground

HTML

<div class="left">
    <div id="wrap1">
        <span id="img1">test1--->1</span>
        <span id="img2">test1--->2</span>
    </div>
    
    
    
</div>

<div class="right">
    <div id="box1"></div>
</div>

    <a href="javascript:" id="reset">cancel</a>

CSS

.custom-state-active { background: #eee; }

.left{
    float:left;
}
.right{
    float:left;
}

#wrap1{
    float:left;
    width:200px;
    border:1px solid red;
    height:100px;
    margin:10px;
    clear:both;
}
#box1{
    float:left;
    width:200px;
    border:1px solid green;
    height:100px;
    margin:10px;
    clear:both;
}
span{
    float:left;
    margin:3px;
    border:1px solid #0CF;
}

JavaScript

$( "span").draggable({ revert: "invalid" });
        
        $( "#box1" ).droppable({
            accept: "#wrap1 span",
            drop: function( event, ui ) {
                //do something
            }
        });
        
        $( "#wrap1" ).droppable({
            accept: "#wrap1 span",
            drop: function( event, ui ) {
                //do something
            }
        });
        
        
        $('#reset').click(function(){
            $( "span").animate({left:0,top:0});
        });