JQuery Динамически созданный Draggable Div с редактируемым текстом

Question

Я пытаюсь сделать небольшие окна, которые можно перетаскивать и иметь редактируемые div внутри, используя contentEditable = true.

я могу перетащить их вокруг, но не могу редактировать текст

$(document).ready(function(){ 
    $('#mybtn').click(function(){ 
     $('#container').append("<div class=window><div class=bar>Story Element</div><div contentEditable=true class=textbox>Drag me</div></div>"); 
     $(".window").draggable({delay: 100}); 
    }); 

    $(".textbox").on("click", function(e) { 
     $(".window").draggable('disable'); 
     $(this).find(".textbox").focus(); 
    }); 

    $(".textbox").on("blur", function(){ 
     $(".window").draggable('enable'); 
    }); 
}); 

Answer 1

Если вы сделать ' bar 'class handle для draggable, похоже, что он действует так, как вы этого хотите. Вы можете перетащить ящик и редактировать текст.

$(".window").draggable({handle:'.bar'}); 

http://jsfiddle.net/NrLgQ/

Answer 2

Вы не завернул атрибуты правильно контента вы appending.Try это:

$('#container').append("<div class='window'><div class='bar'>Story Element</div><div contentEditable='true' class='textbox'>Drag me</div></div>");