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)" ng-change="changeValue($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())
    }
    changeValue = function (ev) {
        let win;
        win = window.event;
　　　　//禁止输入特殊字符
        if ((win.keyCode >= 49 && win.keyCode <= 82) || (win.keyCode >= 96 && win.keyCode <= 105)) {
　　　　　　　//判断回车进行内容替换
            if (win.keyCode == 13) {
                this.insertHtmlAtCaret(ev.key);
            }
        }
    }
    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(),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);
    }

因为完成的比较匆忙,功能实现的不完美,后续在优化