javascript - 按钮可拖动，同时内容可编辑

Question

我有一个按钮，单击它会创建另一个按钮。

$('#button')
.click(function (eventClick, posX, posY) {
    var htmlData = '<div id="btn' + $.count + '" class="draggable ui-widget-content ui-draggable" ' + 'data-page="' + $.page + '" ';
    if (posX != null && posY != null) {
        htmlData += 'style="left:' + Math.abs(posX - 439) + 'px; top:' + Math.abs(posY - 124) + 'px;""';
    }

    htmlData += '><button id="editable' + $.count + '" style="width:100%; height:100%">Button</button><a href="#" class="delete" style="z-index:999"></a></div>';

    $('.demo').append(htmlData);
    $('.draggable').draggable({
        containment: "#workspace",
        scroll: false,
        cancel: false,

    })
        .resizable({
            containment: "#workspace"
        })
        .click(function () {
            if ($(this).is('.ui-draggable-dragging')) {
                return;
            }
            $(this).draggable("option", "disabled", true);
            $(this).attr('contenteditable', 'true');
        })
        .blur(function () {
            $(this).draggable('option', 'disabled', false);
            $(this).attr('contenteditable', 'false');
        });
    $('a.delete').on('click', function (e) {
        e.preventDefault();
        btnID = $(this).closest('.draggable')[0].id;
        //alert('Now deleting "'+objID+'"');
        $('#' + btnID + '').remove();
    });

    $.count++;
});

单击创建按钮时会触发此 javascript，现在这个嵌套在 div 中的新按钮具有可拖动、可调整大小、可删除的属性，并且内容应该是可编辑的。现在我在编辑文本时出现了问题，当我完全删除它的内容时，整个 button 标签都被删除了。我只剩下一个 div 标签。我似乎找不到问题所在。

Answer 1

在我看来，您正在为 div 设置 contentEditable 属性，因为它具有“可拖动”类。这意味着 DIV 中的所有内容都可以删除，包括按钮。如果您希望按钮的文本可编辑，则应改为在按钮上设置 contentEditable 属性。