JQuery 动态创建可编辑文本的可拖动 Div答案

【问题标题】：JQuery Dynamically Created Draggable Div with Editable TextJQuery 动态创建可编辑文本的可拖动 Div
【发布时间】：2014-02-15 14:21:36
【问题描述】：

我正在尝试使用 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');
    });
});

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

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

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

http://jsfiddle.net/NrLgQ/

【讨论】：

谢谢：D 非常有帮助

【解决方案2】：

您没有为要附加的内容正确包装属性。试试这个：

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

【讨论】：

谢谢，但这不是问题
@user3066347：现在有什么问题。
草率的属性包装不会导致问题 - 我不确定如何创建带有可编辑文本的可拖动框。
你能制作小提琴吗
我不知道你在开什么车。