拖放；使用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();
    }
});
});

---

嗯，我想也许你想看看html属性：contentEditable

你也可以在附近找到一些很好的插件来实现这一点