JSFiddle - React, Tailwind, and code Playground

by Jake Wolpert

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/css/demo.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.css">
<script src="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.cs"></script>
<script src="https://code.jquery.com/jquery-1.12.4.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

$(init);

  function init() {
    var diagram = [];
    var canvas = $(".canvas");




    $(".tool").draggable({
      helper: "clone",
      //cursor: "move",
      cancel: false,
    });
    canvas.droppable({
      drop: function(event, ui) {
      	console.log(ui.helper.prop("outerHTML"))
				
        var new_signature = ui.helper.is('.ui-resizable') ?
        	ui.helper
          :
        	$(ui.helper).clone().removeClass('tool ui-draggable ui-draggable-handle ui-draggable-dragging');
        $(this).append(new_signature);
        new_signature.draggable({
          helper: false
        }).resizable()

      }
    });

  }