时间戳

首页 > 解决方案 > 使用 jquery 拖放电子邮件模板生成器

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

问题描述

我想创建拖放电子邮件模板生成器。我尝试了下面的代码但没有工作。我想在拖入右侧框后编辑文本编辑器

点击这里查看我的代码

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

标签： jqueryhtmlcss

解决方案

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

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

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

推荐阅读