将Draggable div的HTML插入textarea在jquery中的特定位置

Question

我想将可拖动的div html插入textarea的特定位置。

有一些可拖动的div，我想把div拖到textarea中，当我释放鼠标左键时，div html（）会自动附加到textarea的光标位置。

有没有解决方案？

我的代码

$('#datasource-column-container').find('ul > li').each(function (i, element) {

    $(element).draggable({
        revert: "invalid",
        helper: "clone",
        connectToSortable: '#template-htmlarea',
        zIndex: 999,
        stop: function () {
            // alert($(element).html());
            // $('#template-htmlarea').html($(element).html());
            $('#template-htmlarea').insertAtCaret($(element).html());
        }
    });

    //$(element).sortable();
});

$.fn.extend({
    insertAtCaret: function (myValue) {
        if (document.selection) {
            this.focus();
            sel = document.selection.createRange();
            sel.text = myValue;
            this.focus();
        } else if (this.selectionStart || this.selectionStart == '0') {
            var startPos = this.selectionStart;
            var endPos = this.selectionEnd;
            var scrollTop = this.scrollTop;
            this.value = this.value.substring(0, startPos) + myValue + this.value.substring(endPos, this.value.length);
            this.focus();
            this.selectionStart = startPos + myValue.length;
            this.selectionEnd = startPos + myValue.length;
            this.scrollTop = scrollTop;
        } else {
            this.value += myValue;
            this.focus();
        }
    }
});