如何定位可编辑div光标的像素坐标

2022-11-14  本文已影响0人  慕名君
在可编辑div里面,我们想要实现如下图一样的逻辑定位,就要知道光标在document或者父级的坐标。 test.jpg

我是利用添加一个node,然后拿到node的坐标进行处理。

  /**
     * 获取光标坐标
     */
    getCurrentPoint(){
        //先插入一个div 根据div来算坐标
        let div = DomUtils.createElement('div','currentPointDiv');
        this.insertNode(div);
        // div.innerText='111';
        div.style.display = 'inline'
        let point = EMRPoint.getAbsPoint(div);

        console.log('getCurrentPoint'+JSON.stringify(point));

        DomUtils.removeElementById("currentPointDiv");
        return point;

    }

  /**
     * 在鼠标位置插入一个节点元素
     * @param node 节点元素
     */
    insertNode(node){
        const range = this.getCurrentRange();
        range.insertNode(node);
    }

 /**
     * 获取当前坐标长度
     * @returns {null}
     */
    getCurrentRange(){
        let range = null;
        var doc = this.document.ownerDocument || this.document.document;
        var win = doc.defaultView || doc.parentWindow;
        var sel;

          // 谷歌、火狐
        if (typeof win.getSelection != "undefined") {
            sel = win.getSelection();
            // 选中的区域
            if (sel.rangeCount > 0) {
                range= win.getSelection().getRangeAt(0);
            }

        }
        return range;

    }



我把丢失的函数方法补充,自己去拼接就好了

    /**
     * 得到div在body中所在的绝对坐标
     * @param element
     * @returns {{x: number, y: number}}
     */
    static getAbsPoint(element)
    {
        let   x   =   element.offsetLeft,   y   =   element.offsetTop;
        while(element=element.offsetParent)
        {
            x   +=   element.offsetLeft;
            y   +=   element.offsetTop - element.scrollTop;
        }
        x = x-document.body.scrollLeft;//得到相对坐标
        y = y-document.body.scrollTop;
        return {x:x,y:y};
    }
上一篇 下一篇

猜你喜欢

热点阅读