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(), 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);
    }

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

原文地址:https://www.cnblogs.com/-Kam/p/10057608.html

时间: 2024-10-11 15:08:33

Angular 2.0 文本拖拽的相关文章

使用angular帮你实现拖拽

拖拽有多种写法,在这里就看一看angular版的拖拽. <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ width: 100px; height: 100px; background:

【 D3.js 进阶系列 — 6.0 】 拖拽的应用(Drag)

拖拽(Drag)是交互式中很重要的一种,本文将讲解拖拽的使用方法. 1. drag的定义 D3中可用 d3.behavior.drag() 来定义 drag 行为. var drag = d3.behavior.drag() .on("drag", dragmove); function dragmove(d) { d3.select(this) .attr("cx", d.cx = d3.event.x ) .attr("cy", d.cy =

Android4.0 Launcher拖拽原理分析1

在Android4.0源码自带的Launcher中,拖拽是由DragController进行控制的. 1.基本流程: 相应的View在检测到用户操作后进行判断,若可以触发拖拽,则设置自身的相应状态,然后将待拖拽对象的Bitmap对象.当前位置.拖拽源.待拖拽对象等信息传给DragController的startDrag方法启动拖拽. 接下来,DragLayer的onInterceptTouchEvent拦截触屏事件,将其转到DragController的onTouchEvent方法. 在Drag

ajax2.0之拖拽上传

index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style media="screen"> * {margin:0; padding:0; list-style: none} .box {width:400px; height:200px; background:#CCC

[ActionScript 3.0] AS3 拖拽混动效果之一

package { import flash.display.Loader; import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import flash.net.URLRequest; /** * @author Frost.Yen * @E-mail [email protected] * @create 2015-11-17 上午10:20:30 * */ [SWF(

as3文本框的动态拖拽和编辑

现在很多软件都支持了编辑界面的文本拖拽和点击编辑来直接修改数值, 这样便于操作, 而且体验性也好, 抛砖引玉吧 于是就用好久没编写的as3来写了一下: 因为用的flash ide写的没有提示, 就暂时不做细节处理了, 如果用于工程上会有点小问题, 不过不影响本效果展示 代码: import flash.text.TextField; import flash.events.* var txtDragValue:TextField; txtDragValue.selectable = false;

移动端可拖拽悬浮窗+点击事件

<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <!--设置viewport--> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"/> </head>

自定义滚动条和拖拽

实现自定义滚动条和拖拽滚动效果 <div class="dropDownMenu"> <ul> <li><a href="#">平缝机</a></li> <li><a href="#">包缝机</a></li> <li><a href="#">绷缝机</a></li&

h5学习--七个h5拖拽事件

<script> // 七个h5拖拽事件 const box = document.getElementById('box') const left = document.getElementById('left') const right = document.getElementById('right') let num = 0 //ondragstart 拖拽开始的时候,进行移动 right.ondragstart= function(){ console.log("lll&q