JSFiddle - React, Tailwind, and code Playground

by Amar Nyayapati

HTML

<div id="imageDiv">
<img src="http://25.media.tumblr.com/tumblr_m97v1x9KQa1r13u7jo1_500.jpg"/>
</div>

CSS

#imageDiv {
      position:relative;
      border:dashed 2px #7E7E7E;
      min-width:300px;
      min-height:300px;
      box-shadow:0 0 5px #000;
      cursor:pointer;
      float:left;
      overflow:hidden;
    }
    .tag {
      position:absolute;
    }
    .tag:active{
      cursor:move;
    }
    .box {
      border:solid 3px red;
      width:100px;
      height:100px;
      float:left;
      background : rgb(0,0,0,0.6);
    }
    .textName{
        color:blue;
        
    }

JavaScript

$("#imageDiv img").click(function (e) {
    var offset = $(this).offset();
    var position = {
        left: e.clientX - offset.left - 50,
        top: e.clientY - offset.top - 50
    }
    var appendHtml = $('<div class="tag"><div class="box"></div></div>').draggable({containment: "parent"}).css({"position":"absolute","top":position.top,"left":position.left});
    $(this).parent().append(appendHtml); 
});

$('.box').live('click',function(){
    console.log("hello")
    $(this).append('<span class="textName">Hello</span>');
})