无法编辑可拖动div的内容

Question

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

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

基本上，我正在做的是动态制作可拖动文本框。 现在，我正在尝试在创建的任何文本框的div中编辑文本，但是无法更改，它只是突出显示是否单击，然后在释放鼠标时，它会返回到其原始状态。 实际上，我想将此代码http://jsfiddle.net/cSMYG/121/集成到我正在做的事情中。 这样做是在div中编辑文本。

这是链接： http : //jsfiddle.net/VRTf8/1/我无法编辑对象的内容

Answer 1

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

这是代码JSFiddle Version的简化版本：

$('#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);
});

这将创建一个同时具有“标题”和可编辑内容区域的div，以输入文本。 标题设置为手柄，以便您可以使用它拖动框。

希望这至少可以帮助您朝正确的方向前进。

Answer 2

可以肯定的是，链接到的Fiddle包括jQuery UI 。 您是否将其包括在页面中？