JSFiddle - React, Tailwind, and code Playground

by stefan_

HTML

<textarea rows="4" cols="50" placeholder="Enter Text Here!"></textarea>
<br/>
<input type="button" id="button" value="Add Div with Text" />
<br/>
<div>
    <div class="middle-side empty"></div>
    
</div>

<div id="dialog-form">
    <label>Text:</label><input type="text" />
</div>


<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

CSS

.middle-side {
    width: 500px;
    height: 500px;
    border: 2px solid;
}
.draggable {
    width: 150px;
    height: 150px;
    padding: 0.5em;
    background:#FFFFDD;
    position: relative;
    z-index: 1;
}

.placement {
    border: 2px dashed #000;
}

JavaScript

/** Remove newly created div **/
$(".remove").click(function(){
    $(".draggable").remove();
});

var z = 1;



$('#button').click(function (e) {
    /** Make div draggable **/
    $('<div />', {
        class: 'draggable ui-widget-content',
        html: '<span class="close">[X]</span><span class="text">' + $('textarea').val() + '</span>',
        appendTo: '.middle-side',
        draggable: {
            containment: 'parent',
            start: function( event, ui ) {
                $(this).css('z-index', ++z);
            }
        }
    }).addClass('placement').dblclick(
        function() {
            console.log($(this));
            var divElem = $(this);
            dialog = $( "#dialog-form" ).dialog({
                height: 300,
                width: 350,
                modal: true,
                buttons: {
                    "Save": function() {
                        divElem.find('.text').text($( "#dialog-form input" ).val());
                        dialog.dialog( "close" );
                    },
                    Cancel: function() {
                        dialog.dialog( "close" );
                    }
                }
            });
            
        }
    );
    
    
    
    
    /** Contain draggable div **/
    $('.middle-side').parent().mousemove(function(e){
        var offset = $(this).offset();
        var relX = e.pageX - offset.left;
        var relY = e.pageY - offset.top;
        $('.placement').css({'top': relY + 30,'left': relX + 10, 'position': 'absolute'});
    })
    
});

/** Place a temporary dashed border on div after initial creation**/
$('.middle-side').on('click', function(e){
    var offset = $(this).offset();
    var relX = e.pageX - offset.left;
    var relY = e.pageY - offset.top;
    $('.placement').css({'top': relY,'left': relX, 'position': 'absolute' });
    $(this).off("mousemove").find('.placement').removeClass('placement')    
}); 

$('body').on('click', '.draggable .close', function () {
   ...