JQuery Dynamically Created Draggable Div with Editable Text

Question

I'm trying to make small windows which are draggable and have editable divs inside using contentEditable=true.

I can drag them around but cant edit the text

   $(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

您没有正确包装要附加的内容的属性。请尝试：

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

Answer 2

If you make make the 'bar' class a handle for draggable, it looks like it acts how you want it to. You can drag the box around and still edit the text.

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

http://jsfiddle.net/NrLgQ/