Angular 2.0 文本拖拽

基於Angular7.1和TypeScript實現

Html代碼

                   <div style="padding-left: 0px;">
                        <div id='contentTem' class='temp-style' contentEditable="true" (drop)="drop($event)" (dragover)="allowDrop($event)">
                        1</div>
                        <div>
                            效果預覽
                            <div class='temp-style' style="min-height: 150px;" id='preview'></div>
                        </div>
                    </div>
                    <div>
                        <div><a href="javascript:(0)" ng-click='Edit()'>新增自定義參數</a></div>
                        <div class='temp-style option'>
                            <div>
                                <span id='t1' contenteditable="false" draggable="true" (dragstart)="drag($event)">[拖拽]</span>
                            </div>
                            <div>
                                <span id='t2' contenteditable="false" draggable="true" (dragstart)="drag($event)">[拖拽2]</span>
                            </div>
                        </div>
                    </div>

TS代碼

   allowDrop = function (ev) {
        $("#contentTem")[0].focus();
        ev.preventDefault();
    }

    drag = function (ev) {
        $("#contentTem")[0].focus();
        var selection = window.getSelection()
        // 設置最後光標對象
        this.lastEditRange = selection.getRangeAt(0);
        ev.dataTransfer.setData("Text", ev.target.id);
    }

    drop = function (ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("Text");
        this.insertHtmlAtCaret($("#" + data).html())
    }

    insertHtmlAtCaret = function (html) {
        if (html == undefined) {
            return;
        }
        var selection;
        selection = getSelection()
        // 設置最後光標對象
        this.lastEditRange = selection.getRangeAt(0);
        this.lastEditRange.deleteContents();
        //判斷是不是拖拽
        var htmlData = "";
        if (html != undefined) {
            htmlData = html;
        } else {
            htmlData = $("#contentTem").html();
        }

        if (selection.anchorNode.data != undefined && selection.anchorNode.data.indexOf("[Key]") > -1) {
            htmlData = htmlData.replace(/\[Key]/g, '<span style="color:red" contentEditable="false">[顯示內容]</span>');
            $("#contentTem").html('');
            $("#contentTem")[0].focus();
            var el = document.createElement("div");
            el.innerHTML = htmlData;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ((node = el.firstChild)) {
                lastNode = frag.appendChild(node);
            }
            //將內容填充進去
            this.lastEditRange.insertNode(frag);
            if (this.lastEditRange) {
                //從新設置光標位置
                this.lastEditRange = this.lastEditRange.cloneRange();
                this.lastEditRange.setStartAfter(lastNode);
                this.lastEditRange.collapse(true);
                selection.removeAllRanges();
                selection.addRange(this.lastEditRange);
            }
        } else {
            htmlData = '<span style="color:red" contentEditable="false">' + htmlData + '</span>';
            var el = document.createElement("div");
            el.innerHTML = htmlData;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ((node = el.firstChild)) {
                lastNode = frag.appendChild(node);
            }
            //將內容填充進去
            this.lastEditRange.insertNode(frag);
            if (this.lastEditRange) {
                //從新設置光標位置
                this.lastEditRange = this.lastEditRange.cloneRange();
                this.lastEditRange.setStartAfter(lastNode);
                this.lastEditRange.collapse(true);
                selection.removeAllRanges();
                selection.addRange(this.lastEditRange);
            }
        }
        //預覽區域
        var previewHtml = $("#contentTem").html();
        previewHtml = $("#contentTem").html().replace(/\[Key]/g, '顯示內容');
        $("#preview").html(previewHtml);
    }

由於完成的比較匆忙,功能實現的不完美,後續在優化