我是javascript的新手.我正在尝试做一个简单的切换div用户选择方向生病放置切换div.经过一些谷歌搜索我发现一个工作小提琴但不如预期看到下面的截图,看看差异

当我在段落的前面选择一些文字它工作正常像这样

但是,当我从底部段落中选择一些文本时,它没有按预期工作

JsFiddle

其实我在React版本工作Fiddle在Jquery

这是我的代码

    import React from 'react'
import {render} from 'react-dom';

export default class App extends  React.Component{
    constructor(props){
        super(props);
        this.state = {
            display:'none',top:'',bottom:'',left:'',right:'',diplayForDown:'none'

        };
        this.handleOnMouseDown = this.handleOnMouseDown.bind(this)
        this.onMounseUp = this.onMounseUp.bind(this)
        this.onMouseDwn = this.onMouseDwn.bind(this)
        this.triggerAlltime = this.triggerAlltime.bind(this)
    }

    handleOnMouseDown(){
        let sel = window.getSelection && window.getSelection();

        let r = sel.getRangeAt(0).getBoundingClientRect();
        let relative=document.body.parentNode.getBoundingClientRect();
        console.log('Relative ',relative);

    if(!sel.isCollapsed){

        console.log(sel,r);
        let display = 'block';

        let top = (r.bottom - relative.top - 80)+'px';
        let bottom = r.bottom+'px';
        let left =( r.left)+'px';
        let right = (r.right)+'px';
        console.log('This is Height',r.bottom-r.top);
        let selectionHeight = r.bottom - r.top;
        if(selectionHeight => 22.22){
            this.setState({
                display,top:top,bottom,left,right
            })
        }else{
            this.setState({
                display,top,right
            })
        }


    }else{
        this.setState({
            display:'none'
        })
    }






        console.log('Slected')
    }
    onMounseUp(e){
        e.preventDefault()
        let sel = window.getSelection && window.getSelection();
        if(!sel.isCollapsed){
            console.log('Moved Up')


        }
    }
    onMouseDwn(e){


        let sel = window.getSelection && window.getSelection();
        if(!sel.isCollapsed){
            console.log('Moved Down')
        }
    }
    getSelectionHtml() {
        let html = "";
        if (typeof window.getSelection != "undefined") {
            let sel = window.getSelection();
            if (sel.rangeCount) {
                let container = document.createElement("div");
                for (let i = 0,len = sel.rangeCount; i < len; ++i) {
                    container.appendChild(sel.getRangeAt(i).cloneContents());
                }
                html = container.innerHTML;
            }
        } else if (typeof document.selection != "undefined") {
            if (document.selection.type == "Text") {
                html = document.selection.createRange().htmlText;
            }
        }

        console.log('html',html)
        return html;

    }
    lastCharRTL(txt) {
        return /[\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC]$/.test(txt);
    }

    triggerAlltime(e){
        // console.log('Some Thinms')
        if(!window.getSelection().isCollapsed){
            //find the Direction Of Slelection
            let sel = window.getSelection();
            console.log(sel)
            let range = document.createRange();
            range.setStart(sel.anchorNode,sel.anchorOffset);
            range.setEnd(sel.focusNode,sel.focusOffset);
            let backwards = range.collapsed;
            range.detach();
            // get selection rects
            let rects = sel.getRangeAt(0).getClientRects();
            let n = rects.length - 1;
            let display = 'block';
            console.log(this.lastCharRTL(this.getSelectionHtml()))
            if (this.lastCharRTL(this.getSelectionHtml()))
                this.setState({
                   display:'none',diplayForDown:'none',top: rects[n].top + 10,left: rects[n].left - 10
               })
            else if (backwards)
                this.setState({
                    display,top: rects[0].top + -68,left: rects[0].left



                })
            else
                this.setState({
                    display:'none',diplayForDown:'block',top: rects[n].top + 40,left: rects[n].right+-160

                })


        }else{
            this.setState({

                display:'none',})
        }
    }


    render(){
        return(