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

Button draggable and at the same time contenteditable

本文关键字：编辑 拖动 按钮      更新时间：2023-09-26

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

$('#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标签。我似乎找不到问题所在。

在我看来

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

相关文章：