JSFiddle - React, Tailwind, and code Playground

by A B

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.min.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<div id="hellotest">
   <div id="drag" style="width: 30px; height: 30px">
     <img src="/assets/1.jpg" alt="" width="100%" height="100%">
   </div>
</div>
<div id="hellotest2">
asdassa
</div>

CSS

#hellotest2
{
    width: 400px;
    height: 400px;
    border: solid 1px red;
}

JavaScript

$("#drag").draggable({ helper: 'clone', cursor: "move"});
$("#hellotest2").droppable({
    tolerance: "pointer",
    drop: function(event, ui){
        var ud = ui.draggable;
        if( ud.draggable( "option", "helper" ) == "clone" ){
            ud.clone()
            .appendTo("#hellotest2")
            .resizable()
            .draggable()
            .on("mouseover" ,function(){
                $(this).css("border", "1px solid red");
            })
            .on("mouseout" ,function(){
                $(this).css("border", "1px solid #999");
            })
.css({
    position: 'absolute',
    left: ui.position.left,
    top: ui.position.top
})
        }
    },
    out: function(event, ui){
        ui.draggable.remove();
    }
});