jquery - 使用jQuery拖放电子邮件模板生成器

我想创建拖放电子邮件模板生成器。我尝试了以下代码，但无法正常工作。拖动到右侧框后，我想编辑文本编辑器

点击此处my code

JS

$( function() {

$('.clickedit').hide();
$("#dragme").draggable({
    helper: 'clone',
    cursor: 'move',
    tolerance: 'fit'

});

var x = null;
$("#droppable").droppable({
 drop: function(e, ui) {
 x = ui.helper.clone();
        x.draggable({
            helper: 'original',
            containment: '#droppable',
            tolerance: 'fit'
        });


/*  text edit start  */

    $.fn.textedit = function(){

var defaultText = 'Text Edit';

function endEdit(e) {
    var input = $(e.target),
        label = input && input.prev();

    label.text(input.val() === '' ? defaultText : input.val());
    input.hide();
    label.show();
}

$('.clickedit')
.focusout(endEdit)
.keyup(function (e) {
    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
        endEdit(e);
        return false;
    } else {
        return true;
    }
})
.prev().click(function () {
    $(this).hide();
    $(this).next().show().focus();
});

}

x.textedit();
/*  text edit End  */



        x.find('.ui-resizable-handle').remove();
        x.resizable();

        x.appendTo('#droppable');
        ui.helper.remove();
    }
});
});

最佳答案

mmmhhh我想也许您想看看html属性：contentEditable。

https://code.tutsplus.com/tutorials/create-an-inline-text-editor-with-the-contenteditable-attribute--cms-25655

您可能还会在附近找到一些不错的插件来执行此操作。