JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/css/demo.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div style="width:20%;float:left;border:1px solid; height:400px">
  <h6>buttons</h6>
  <div>
    <div class="tool tool-1" contenteditable="true">click</div>
    <br/>
    <div class="tool tool-2" contenteditable="true">click</div>
    <hr />
  </div>
</div>
<div style="width:78%;height:400px;float:right;border:1px solid;" class="canvas">
  <p>
    canvas
  </p>

</div>
note:i want to drag these button multiple time and once it dopped inside canvas it can be draggable inside canvas and resizable

CSS

.tool-1,
.tool-2 {
  width: 60px;
  height: 1.5em;
  border: 1px red solid;
  border-radius: .2em;
  text-align: center;
  padding: 0.5em;
}

.tool-2 {
  border: 1px green solid;
}

.ui-resizable-se {
  right: -5px;
  bottom: -5px;
  position: relative;
}

JavaScript

function init() {
  var diagram = [];
  var canvas = $(".canvas");
  $(".tool").draggable({
    helper: "clone",
    cancel: false,
  });
  canvas.droppable({
    drop: function(event, ui) {
      console.log(ui.helper.prop("outerHTML"));
      var new_signature;
      if (ui.helper.is('.ui-resizable')) {
        new_signature = ui.helper;
      } else {
        new_signature = ui.helper.clone();
        new_signature.removeClass("ui-draggable ui-draggable-handle ui-draggable-dragging");
        new_signature.draggable({
          helper: false,
          containment: "parent"
        }).resizable();
      }
      $(this).append(new_signature);
    }
  });
}

$(init);