JSFiddle - React, Tailwind, and code Playground

by swaroop206

HTML

<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>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/base/jquery-ui.css">
<div class="layout">
<div class="left-side">
<div id="dragme"  style="width: 150px; height: 100px;text-align:center;border: 2px solid black;">
<label class="pull-left">Text Edit</label>
<input class="clickedit" type="text" />

</div>
</div>
<div class="right-side">
<div id="droppable"> 
    <P>  Place to drop </P>
</div>
</div>
</div>

CSS

body{margin:0px;}
.layout{width:100%;float:left;}
.left-side{width:15%;padding: 25px 25px;float:left;background: #f2f2f2;height: 100%;}
.right-side{width:75%;float:left;padding:25px;}
#droppable{height: 575px; border: 2px solid red;}
input{outline:0px;border:0px;width:100%;}

JavaScript

$( function() {

$('.clickedit').hide();
$("#dragme").draggable({
    helper: 'clone',
    cursor: 'move',
    tolerance: 'fit'

});

var x = null;
$("#droppable").droppable({
 drop: function(e, ui) {
 x = ui.helper.clone();
        x.draggable({
            helper: 'original',
            containment: '#droppable',
            tolerance: 'fit'
        });
		
	
/*  text edit start  */	
	
	$.fn.textedit = function(){

var defaultText = 'Text Edit';

function endEdit(e) {
    var input = $(e.target),
        label = input && input.prev();

    label.text(input.val() === '' ? defaultText : input.val());
    input.hide();
    label.show();
}

$('.clickedit')
.focusout(endEdit)
.keyup(function (e) {
    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
        endEdit(e);
        return false;
    } else {
        return true;
    }
})
.prev().click(function () {
    $(this).hide();
    $(this).next().show().focus();
});

}	
	
x.textedit();
/*  text edit End  */
	
		
		
        x.find('.ui-resizable-handle').remove();
        x.resizable();
	    
        x.appendTo('#droppable');
        ui.helper.remove();
    }
});
});