JSFiddle - React, Tailwind, and code Playground

by sundaramkumar

HTML

<div class="test red square"></div>
<div class="test gray"></div>
<div id="drop"></div>
<button onclick="alert( document.getElementById('drop').innerHTML )">view</button>

CSS

.test {
  
}
.gray{
  width: 50px;
  height: 50px;
  background-color: gray;
}
.red{
  width: 50px;
  height: 50px;
  background-color: red;
}

#drop {
  width: 200px;
  height: 200px;
  background-color: green;
}

.dropped {
  width: 50px;
  height: 50px;
  background-color: blue;
}

JavaScript

$(document).ready(function() {
  $('.test').draggable({
    helper: "clone",
    revert: "invalid"
  }).click(function() {
    var b = parseInt($(this).width());
    $(this).css('width', b + 5);
  });
  $('#drop').droppable({
    accept: ".test",
    drop: function(e, u) {
      var a = u.helper.clone();
      console.log("INFO: Accepted: ", a.attr("class"));
      a.css("z-index", 1000);
      a.appendTo("#drop");
      a.attr('class', 'dropped').draggable({
        containment: "#drop"
      }).dblclick(function() {
        // Enabled Resize on element when double clicked
        $(this).resizable();
      });
    }
  });
  $(document).click(function() {
    if ($(".dropped").length) {
      // Disabled Resize on all elements when #drop
      $(".ui-resizable").resizable("destroy");
    }
  });

});