JSFiddle - React, Tailwind, and code Playground

by princefiddle

HTML

<div class="drag-item dr"  id="1">
    <div class="drag-handle"></div>
    <div class="up_img">
        <img id="up_img" height="200px" width="200px" src="http://www.stockfreeimages.com/Coffe-bread-and-flower-thumb10059065.jpg" alt="testimage" ></img>
        
    </div>
</div>

CSS

.dr {
    background: none repeat scroll 0 0 #63F;
    color: #7B7B7B;
    height: 250px;

    text-shadow: 1px 1px 2px #FFFFFF;
    width: 250px;
    position:absolute;
    }
.drag-handle {
    width: 100%;
    height: 30px;
    background-color: #C00;
    cursor: move;
}

JavaScript

$(function () {
    var img='<img id="up_img" height="200px" width="200px" src="http://www.stockfreeimages.com/Coffe-bread-and-flower-thumb10059065.jpg" alt="testimage" ></img>';
    
    $( img ).appendTo( $( "#up_img") );
    $('.drag-item').draggable({
        handle: '.drag-handle',
        cancel: "#up_img",
        
      
    }).resizable({
        
    });
    
    
    
    $("#up_img").click(function() {
        
        alert("You clicked on Image");
     
});

});