Drag & Drop Jquery

Xin chào mọi người!

Em có đoạn code như bên dưới ạ! Với mong muốn là kéo & thả các thẻ div vào trong khu vực textarea, nhưng hiện tại em đang bối rối cách nào để tính được vị trí của các chữ để kéo thả cho đúng ạ? Hiện tại code của em chỉ kéo thả đúng sau vị trí chữ đầu tiên.

Rất mong các cao nhân chỉ giáo cho em với ạ! Em cám ơn các cao nhân!

<fieldset>
    <legend>Data Area</legend>
    <div class="btn btn-info draggable">Text 1</div>
    <div class="btn btn-info draggable">Text 2</div>
</fieldset>

<br />

<div class="form-group">
    @Html.TextArea("MessageArea", (string)ViewBag.Content, new { @class = "form-control", @style = "min-width: 100%", @rows = 15 })
    <br />
    <input type="button" class="btn btn-success" value="SAVE" onclick="return SaveTemplate()" />
    <input type="button" class="btn btn-warning" value="CLEAR" onclick="$('#MessageArea').val('');" />
</div>


<script type="text/javascript" src="~/Scripts/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-ui.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {

        let arr = [];

        $(".draggable").draggable({
            revert: true,
            helper: 'clone',
            start: function (event, ui) {
                $(this).fadeTo('fast', 0.5);
            },
            stop: function (event, ui) {
                $(this).fadeTo(0, 1);
            }
        });

        $("#MessageArea").droppable({
            hoverClass: 'active',
            drop: function (event, ui) {                  
                let arr = this.value.split(" ");
                let insertedArr = insertAfterWord(arr, "Type", " *" + $(ui.draggable).text() + "* ");
                let stringified = insertedArr.join(" ")
                this.value = stringified;
            },
        });
    });


    function insertAfterWord(arr, wordToFind, wordToInsert) {
        console.log(arr)
        let i = arr.indexOf(wordToFind);
        console.log(i);
        if (i > -1) {
            arr.splice(i + 1, 0, wordToInsert);
        }
        return arr;
    } 

    function SaveTemplate() {
        $.ajax({
            type: "POST",
            url: "/Home/DownloadTXTFile",
            data: { Content: $("#MessageArea").val() },
            success: function (result) {
                if (result == 1) {
                    alert("Saved file");
                }
                else {
                    alert(result);
                }
            }
        });
    }
</script>