JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

</head>
<body>
<div id="container">
<br>
<span class='placeholder'>[+++FirstName+++]</span>
				<span class='placeholder'>[+++LastName+++]</span>
				<span class='placeholder'>[+++MobileNo+++]</span>
				<span class='placeholder'>[+++Address+++]</span>
				<span class='placeholder'>[+++Latitude+++]</span>
				<span class='placeholder'>[+++Longitude+++]</span>
<br>
</div><br>
<textarea rows="10" cols="40" id="sms-text">
Please drag and drop the placeholder from the list over here.
</textarea>
    <div id="dropable-area"/>
</body>
</html>

CSS

div#container { border: 1px solid black; width:300px; height:100px }
span.placeholder { border: 1px solid green;margin-left:5px; margin-bottom:5px; }

JavaScript

function insertAtCaret(area, text) {
    var scrollPos = area.scrollTop;
    var strPos = 0;
    var br = ((area.selectionStart || area.selectionStart == '0') ? "ff" : (document.selection ? "ie" : false ) );
    if (br == "ie") {
        area.focus();
        var range = document.selection.createRange();
        range.moveStart ('character', -(area.value.length));
        strPos = range.text.length;
    } else if (br == "ff")
        strPos = area.selectionStart;
    var front = (area.value).substring(0, strPos);  
    var back = (area.value).substring(strPos, area.value.length); 
    area.value=front+text+back;
    strPos = strPos + text.length;
    if (br == "ie") { 
        area.focus();
        var range = document.selection.createRange();
        range.moveStart ('character', -(area.value.length));
        range.moveStart ('character', strPos);
        range.moveEnd ('character', 0);
        range.select();
    } else if (br == "ff") {
        area.selectionStart = strPos;
        area.selectionEnd = strPos;
        area.focus();
    }
    area.scrollTop = scrollPos;
}

$(document).ready(function() {
    var options = {
        accept: "span.placeholder",       
        drop: function(ev, ui) {
            insertAtCaret($("textarea#sms-text").get(0), ui.draggable.eq(0).text());
        }
    };

    $("span.placeholder").draggable({
        helper:'clone',
        start: function(event, ui) {
            var txta = $("textarea#sms-text");
            $("div#dropable-area").css({
                position:"absolute",
                top:txta.position().top,
                left:txta.position().left,
                width:txta.width(),
                height:txta.height()
            }).droppable(options).show();
        },
        stop: function(event, ui) {
            $("div#dropable-area").droppable('destroy').hide();
        }
    });
});