Jquery write inside the draggable div

http://stackoverflow.com/questions/10898705/jquery-rite-inside-the-draggable-div

by fiddleyetu

HTML

<input type="button" id="add" value="Add Div">
<div id="documentMain">
    <div class="dv1" id='Div_1'>
        <p>div 1</p>
    </div>
</div>

CSS

.dv1 {
    font-family: Tahoma, sans;
    color: red;
    background: yellow;
    border: 0px solid orange;
    width: 10em;
    height: 5em;
    padding: 0.9em;
    border-radius:35px;
    font-size:12px;text-align:center;
    border-radius:80%;
    vertical-align: middle;
    
    
}


textarea {
    font-family: inherit;
    color: inherit;
    background: transparent;
    border: 0;
    width: 100%;
    height: 100%;
    float:left;
    resize: none;font-size:12px;
}
.ui-resizable-se {
    bottom: 1px;
  }

JavaScript

// Delay dragging for a bit (100 ms)
var DivCount=2;
$(".dv1").draggable({delay: 100});
$(".dv1").resizable({handles: "se",
                     stop: function (evt, ui) {
                               
                    }
 });

$(document).ready(function() {
    var isDragging = false;
    function validateClick (elem,e){
    	/*Gets clicked position inside the element */
		var offset = elem.offset();
		posX = e.pageX - elem.position().left,
		posY = e.pageY - elem.position().top;

		/* border code from: http://stackoverflow.com/questions/3787502/how-to-get-border-width-in-jquery-javascript */
		var borderWidth = parseInt(elem.css("border-top-width")) * 2; /*There are two sides */
		console.log(borderWidth);
		/* Compares click to the size of the element */
		var inWidth = elem.width() + borderWidth;
		inHeight = elem.height() + borderWidth;
			console.log(inWidth,inHeight,posX,posY);
		if(inWidth > posX && inHeight > posY){
			return true;
		}
			return false;

    };
    $('#documentMain').on('mousedown', '.dv1', function() {
        $(window).mousemove(function() {
            isDragging = true;
            $(window).unbind("mousemove");
            
        });
    })
    .on("mouseup", ".dv1", function(e) {
        var target = $( e.target );
        var wasDragging = isDragging;
        isDragging = false;
        $(window).unbind("mousemove");
        if (!wasDragging && validateClick($(this),e)) {
            
            
            var $this = $(this);
            if($(this).find("textarea").length) return;
            // Replace paragraph with textarea
            var $p = $this.find("p");
            var $textarea = $('<textarea/>').val($p.text());
            $p.replaceWith($textarea);
            // Focus textarea
            $textarea.focus();
        }
    });
});




$(".dv1").on("blur", "textarea", function() {
    // Replace textarea with paragraph
    var $textarea = $(this);
    var $p = $('<p/>').text($textarea.val());
   ...