JSFiddle - React, Tailwind, and code Playground

by Valerie Ren

HTML

<div id="button_part">
  <p draggable="true" id="1">This</p>
  <p draggable="true" id="2">is</p>
  <p draggable="true" id="3">a</p>
  <p draggable="true" id="4">simple</p>
  <p draggable="true" id="5">Drag'n'Drop-Test</p>
</div>
<div id="text_part">
    <textarea id="sortable_textarea" name="sortable_textarea" class="required" cols="100" rows="20">wt jsfgr dfg fdha </textarea>
</div>

CSS

#button_part p {
  appearance:button;
  -moz-appearance:button; 
  -webkit-appearance:button;
  display: inline-block;
  padding: 2px 5px;
}

JavaScript

$(document).ready(function (){
    /****Adding the drag and drop Event handler*****/
    /*$("#button_part li").draggable({
        connectToSortable: "#text_part",
         cursor: "text",
        helper: "clone"
    });*/
document.addEventListener('dragstart', function (event) {
      event.dataTransfer.setData('Text', event.target.innerHTML);
    });
/*
    $("#sortable_textarea").droppable({
        accept: "#button_part li",
        drop: function (event, ui) {
				   var $this = $(this);
           var tempid = ui.draggable.text();
           var dropText;
           dropText = " {" + tempid + "} ";
           var droparea = $('#sortable_textarea');
           var range1 = droparea.selectionStart;
           var range2 = droparea.selectionEnd;
           var val = droparea.value;
           var str1 = val.substring(0, range1);
           var str3 = val.substring(range1, val.length);
           droparea.value = str1 + dropText + str3;
        //tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'New content.');

				}

    });*/
});