JSFiddle - React, Tailwind, and code Playground

by pradeep

HTML

<!DOCTYPE html>
<body>
    <br><div class="block"></div>
    <center>
    <br><div id="existingImges"><br>
    <a class="block-add" href="javascript:void(0)" onclick="setImageProperty('https://g.twimg.com/business/page/image/11TwitterForSmallBusiness-300_1.png')" ><img class="uploadImage" src="https://g.twimg.com/business/page/image/11TwitterForSmallBusiness-300_1.png" /></a>
     <a class="block-add" href="javascript:void(0)" onclick="setImageProperty('http://www.a1smallbusinessmarketing.com/images/prosbo_hires.jpg')" ><img class="uploadImage" src="http://www.a1smallbusinessmarketing.com/images/prosbo_hires.jpg" /></a>
     </center>

</body>

</html>

CSS

.blocks 
    {
    display: inline-block;
    width: 30%;
    }

.block 
    {
    width:50%;
    height : 50%;
    padding:10px;
    border:1px solid #C8C8C8;
    margin:0px;
    background-color:#F0F0F0;
    margin-left: auto;
    margin-right: auto;
    position : relative;
    overflow: hidden;
    }

JavaScript

$.fn.extend({
   draggableChildren: function(selector) {
      $(this).on("mouseover", selector, function() {
          if(!$(this).is(":ui-draggable"))
              $(this).draggable({ containment: "parent" });
          });
          return this;
      }
  });

$.fn.extend({
   resizableChildren: function(selector) {
      $(this).on("mouseover", selector, function() {
         if(!$(this).is(":ui-resizable"))
             $(this).resizable({ containment: "parent" });
         });
      }
  });

$(document).ready(function(){
  setImageProperty=function(imageSource){
     $(".block").draggableChildren(".blocks");
     $(".block").resizableChildren(".blocks");
     $(".block").append('<img class="blocks" src='+imageSource+' />');
 }});