Jquery write inside the draggable div
http://stackoverflow.com/questions/10898705/jquery-rite-inside-the-draggable-div
HTML
<input type="button" id="add" value="Add Div">
<div id="documentMain">
</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());
...