title: Drag & Drop Email Template Builder using jquery
body: <p>I would like to create Drag &amp; Drop Email Template Builder.I tried Below code but not working. i want to edit text editor after drag into the right side box</p>
  
  <p>click here to <a href="https://jsfiddle.net/swaroop206/b95568b3/2/" rel="nofollow noreferrer">my code</a></p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$( 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 &amp;&amp; input.prev();
  
      label.text(input.val() === '' ? defaultText : input.val());
      input.hide();
      label.show();
  }
  
  $('.clickedit')
  .focusout(endEdit)
  .keyup(function (e) {
      if ((e.which &amp;&amp; e.which == 13) || (e.keyCode &amp;&amp; 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();
      }
  });
  });
  </code></pre>