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

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

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

Answer 2

如果你让'bar'类成为draggable的句柄，它看起来就像你想要的那样。您可以拖动框并仍然编辑文本。

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

http://jsfiddle.net/NrLgQ/

JQuery使用可编辑文本动态创建可拖动Div

2 个答案: