Javascript Can'；t编辑可拖动div的内容

我有一段代码，也是从互联网上改编的：

<script>
    $.count = 1;
    $(function() {
        $('#object1')
            .click(function(){
                var htmlData='<div id="'+$.count+'" class="draggable ui-widget-content ui-draggable" style="height:100px; width:100px;';
                htmlData += '"';
                htmlData += '><div id="editable'+$.count+'" style="color:black">Object</div><div id="pos'+$.count+'X"></div><div id="pos'+$.count+'Y"></div></div>';
                $('.demo').append(htmlData);
                $('.draggable').draggable({
                    drag: function(){
                        var offset1 = $(this).offset();
                        var xPos1 = offset1.left;
                        var yPos1 = offset1.top;
                        var element = $(this).attr('id');
                        $('#pos'+element+'X').text('x: ' + xPos1);
                        $('#pos'+element+'Y').text('y: ' + yPos1);
                    }
            })
            .resizable()
            .mousedown(function(ev) {
                 $(this).draggable('disable');
            }).mouseup(function(ev) {
                 $(this).draggable('enable');
            });
            $.count++;
        });
    });

</script>

<div class='demo'></div>

$.count=1；
$（函数（）{
$（“#对象1”）
。单击（函数（）{
var htmlData='Object'；
$（'.demo'）.append（htmlData）；
$（'.draggable'）.draggable({
拖动：函数（）{
var offset1=$（this.offset（）；
var xPos1=offset1.left；
var yPos1=offset1.top；
var元素=$（this.attr（'id'）；
$（'#pos'+元素+'X'）。text（'X:'+xPos1）；
$（'#pos'+元素+'Y'）。text（'Y:'+yPos1）；
}
})
.可调整大小（）
.mousedown（功能（ev）{
$（this.draggable（'disable'）；
}).mouseup（功能（ev）{
$（this）.draggable（'enable'）；
});
$.count++；
});
});

基本上，我正在做的是动态创建可拖动的文本框。现在，我正在尝试编辑创建的任何文本框的div中的文本，但它无法更改，如果单击它，它只会高亮显示，然后当我释放鼠标时，它会返回到其原始状态。实际上，我想把这段代码集成到我正在做的事情中。这样做的目的是编辑div中的文本

以下是链接：

---

我无法编辑对象的内容，只是为了确定，您链接到的小提琴包括

---

. 您是否将其包含在页面中？

我知道这是间接回答您的问题，但您可以将句柄指定为可拖动代码的一部分，以便只有给定元素的一部分触发拖动事件

以下是代码的简化版本：

$（'#object1'）。单击（函数（）{
var newBox=$（“”，{id:$.count，类：“mybox”}）
.append（$（“”，{class:“boxtitle”}）.html（“对象”））
.append（$（“”，{class:“boxcediv”，contenteditable:true}））；
可拖动（{handle:.boxtitle}）.resizeable（）；
$.count++；
$（'.demo'）.append（newBox）；
});

这将创建一个包含“标题”和内容可编辑区域的div来输入文本。标题设置为控制柄，以便可以使用该控制柄拖动框

---

希望这至少能帮助您找到正确的方向。

是的，我确信我包含了jQuery UI。您能为您的问题制作一个JSFIDLE吗？我已经添加了示例。

$('#object1').click(function(){
    var newBox = $("<div>", {id: $.count, class: "mybox"})
        .append($("<div>", {class: "boxtitle"}).html("Object"))
        .append($("<div>", {class: "boxcediv", contenteditable: true}));
    newBox.draggable({handle: ".boxtitle"}).resizable();
    $.count++;
    $('.demo').append(newBox);
});