javascript - JQuery 动态创建可编辑文本的可拖动 Div

Question

我正在尝试使用 contentEditable=true 制作可拖动且内部有可编辑 div 的小窗口。

我可以拖动它们，但无法编辑文本

   $(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”类设置为可拖动的句柄，那么它看起来就像您想要的那样。您可以拖动该框并仍然编辑文本。

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

http://jsfiddle.net/NrLgQ/