相关疑难解决方法(0)

我是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 …

在一个令人满意的DIV中,我想确定,如果用户从左到右或从右到左进行选择.有人为浏览器Firefox,Chrome,Safari,Opera提供了Javascript解决方案吗？在可能的情况下,还有一个用于IE？

<div id="editor" contenteditable>
Selection from Cursor end | here <strong>over bold</strong> to Cursor start | here.
</div>

我在这里准备了jsFiddle中的代码:http://jsfiddle.net/ecUka/

提前致谢 :-)