JSFiddle - React, Tailwind, and code Playground

by flaiming

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<div id='contact-info-draggable'>Drag field to target input
    <br />
    <p>{fill_name}</p>
    <p>{fill_email}</p>
    <p>{fill_phone}</p>
    <p>{fill_subject}</p>
    <p>{fill_text}</p>
</div>
<br />
<br />
<textarea id="txtMessageFields" name="[asdfsdf][werert][text4etre]" cols="20" rows="1"></textarea><br />
<input type="text" id="asdada" /><br />
<input type="text" name="asd$ad$a" /><br />

CSS

#contact-info-draggable {
     padding: 10px;
     background-color: #FF7200;
     width: 300px;
     position: fixed;
     z-index: 2147483647;
     top: 5px;
     right: 5px;
 }
 #contact-info-draggable p {
     display: inline-block;
     cursor: move;
     padding: 4px 6px;
     margin-bottom: 5px;
     background-color: white;
     border-radius: 4px;
 }

JavaScript

$(document).ready(initialize);

function initialize() {

    $("#contact-info-draggable p").draggable({
        appendTo: "body",
        helper: "clone"
    });


    $("textarea, input").droppable({
        accept: "#contact-info-draggable p",
        tolerance: "pointer",
        drop: function (event, ui) {
            // get elem by name
            var elem_attr = $(this).attr("name");
            if (elem_attr) {
                // escape problematic chars
                elem_attr = elem_attr.replace(/(\[|\]|\$)/g, '\\$1');
                var elem = $('[name=' + elem_attr + ']');
            } else {
                //get elem by id
                elem_attr = $(this).attr("id");
                var elem = $('#' + elem_attr);
            }
            elem.val(ui.draggable.text());
        }

    });

}