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);
});

这会创建一个带有'title'和contenteditable区域的div来输入文本。标题设置为句柄，以便您可以使用该标题拖动框。

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

Answer 2

可以肯定的是，您链接到的小提琴包括jQuery UI 。你把它包括在你的页面中吗？

无法编辑可拖动div的内容

2 个答案: