JSFiddle - React, Tailwind, and code Playground

by Zkolya_linkoln

HTML

<button id="btn2">new div</button>
<br/>
<div id="container"></div>
<div id="c" contenteditable=true>g</div>

CSS

.resize {
  background-color: #29e;
  
  
  
  border: 2px solid;

  width: 100px;
  height: 100px;
}
#container {
  box-shadow: 4px 0px 18px -1px #0000ff;
  width: 700px;
  height: 500px;
}
.selected {
  border: 1px dotted black;
  /*box-shadow:0px 0px 10px rgba(0,0,0,0.5);*/
}

JavaScript

$(document).ready(function() {
  var dname_id = 1;
  $("#btn2").click(function() {

    var dynDiv = $('<div>')
    .attr({'id': 'div_' + dname_id++,'contenteditable': 'true'})
      .css({
        'width': '50px',
        'height': '20px'
      })
      .addClass('resize')
     .html("f");
     

    $('#container').append(dynDiv);
    //-------------------------------------------------------//
    dynDiv.resizable({
      ghost: true
    })
    dynDiv.draggable({
      containment: 'parent'
    });

    dynDiv.click(function(event) {
            event.stopPropagation();

     /*$('.selected').removeClass('selected');
      $(this).addClass('selected');*/
     
 /*$('.selected').attr('contenteditable', 'true' )*/



    });
  });
  /*--------------------------------------------*/

});