Пользовательский интерфейс JQuery, перетащите текст в позицию курсора внутри текстового редактора

var quill = new Quill('#editor', {
  theme: 'bubble'
});

$(function() {
  $("#allfields li").draggable({
    appendTo: "body",
    helper: "clone",
    cursor: "select",
    revert: "invalid"
  });
  initDroppable($("#TextArea1"));

  function initDroppable($elements) {
    $elements.droppable({
      hoverClass: "textarea",
      accept: ":not(.ui-sortable-helper)",
      drop: function(event, ui) {
        var $this = $(this);

        var tempid = ui.draggable.text();
        var dropText;
        dropText = tempid;

      }
    });
  }
});

.editor_container {
  width: 100%;
  margin: 50px 0 0 0;
  display: inline-block;
}

#editor {
  background-color: #002b36;
  color: #93a1a1;
  width: 45%;
  height: 400px;
  float: left;
}

#preview {
  width: 45%;
  height: 400px;
  float: left;
  padding: 10px;
  border: solid 1px #ccc;
  margin: 0 0 0 5%;
}

#allfields li:hover {
  cursor: pointer;
}

<link rel = "stylesheet" href = "//cdn.quilljs.com/1.3.6/quill.bubble.css">
<script src = "https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link href = "https://cdn.quilljs.com/1.1.6/quill.snow.css" rel = "stylesheet">
<script src = "https://cdn.quilljs.com/1.1.6/quill.js"></script>

<!--jquery UI--->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" type = "text/javascript"></script>
<script src = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js" type = "text/javascript"></script>

<div class = "editor_container">
  <div id = "editor">
    <h1>Dear {{name}},</h1>
    <p>
      This is to notify you that you have passed {{threshold_percent_Value}}% on your {{product}} Mobile Data Bundle
    </p>
    <p>
      Note that once your limit is reached, you might be capped and may not be able to connect. <br>
      <p>Regards,<br>{{ company_name }}</p>
  </div>
  <div id = "preview">
    <div class = "dragitems">
      <h3>
        <span>Available Fields</span></h3>
      <ul id = "allfields" runat = "server">
        <li id = "node1">{{Name}}</li>
        <li id = "node2">{{Address}}</li>
        <li id = "node3">{{product}}</li>
        <li id = "node11">{{Other4}}</li>
        <li id = "node12">{{Other5}}</li>
      </ul>
    </div>
  </div>
</div>