react项目中，想做一个可拖拽的组件，但是位置一直无法放到指定的位置

Question

import '../css/web.css';
import backImg from '../images/back.jpg'


class BaseComponent extends React.Component {
    _bind(...methods) {
        methods.forEach( (method) => this[method] = this[method].bind(this) );
    }
}

class NotFoundPage extends BaseComponent {
    constructor(props) {
        super(props);
        // this._handleFoo = this._handleFoo.bind(this);
        // this._bind('_handleClick', '_handleFoo');
        this.state = {
            time: 11
        }
    }

    readPositionJson() {
        var obj= {
            x:100,
            y:200
        }
        event.stopPropagation()
        event.preventDefault()

    }

    writePositionJson() {
        event.stopPropagation()
        event.preventDefault()

    }

    // 倒数
    redirect(){
        let nextTime = this.state.time - 1;

        if(this.state.time<=0){
            let strTime = '无法自动跳转到首页';
            //document.getElementById('num').innerHTML=0;
            //location.href="http://127.0.0.1:6600/#/";
            document.getElementById('error').innerHTML=strTime;

        }
        else{
            // console.log(nextTime);
            document.getElementById('num').innerHTML=nextTime;

            this.setState({ time: nextTime });
        }
    }

    handleDrawOn(e){
        //console.log(e);

        var draw01=document.getElementById('draw01');
        //console.log(draw01.offsetLeft);
        //console.log(e.clientX);
        //drawOn(e, draw01)
        //e.persist();
        var oEvent = e;
        console.log(oEvent)

        drawOn(oEvent.clientX, oEvent.clientY, draw01.offsetLeft, draw01.offsetTop, draw01)

        /*
        var oDiv = draw01;
        console.log(oEvent);
        console.log('拖拽了');
        var x=0;

        oEvent.clientX = 0;
        oEvent.clientY = 0;
        var y=0;
        x=oEvent.clientX-oDiv.offsetLeft;
        y=oEvent.clientY-oDiv.offsetTop;
        console.log(x+'='+y);

        var distanceX = oEvent.clientX - oDiv.offsetLeft;
        var distanceY = oEvent.clientY - oDiv.offsetTop;
        document.onmousemove = function(ev){

            oDiv.style.left = oEvent.clientX - distanceX + 'px';
            oDiv.style.top = oEvent.clientY - distanceY + 'px';
        };
        document.onmouseup = function(){

            document.onmousemove = null;
            document.onmouseup = null;
        };
        */
    }

    componentDidMount() {
        getComponentJquery().then(component => {
            //document.body.appendChild(component);
        })

        this.timer = setInterval(()=> this.redirect(), 1000);
        //document.getElementById('ec').style['width'] = '500px';
        //document.getElementById('ec').style['height'] = '300px';
        var draw01=document.getElementById('draw01');

        /*
        draw01.addEventListener('onmousedown',function(){
            var e = event || window.event || arguments.callee.caller.arguments[0];
        });

        */
        /*
        window.addEventListener('onmousedown',function(e){
            var oDiv=document.getElementById('draw01');
            var oEvent=ev||event;
            var x=0;
            var y=0;
            x = oEvent.clientX-oDiv.offsetLeft;
            y = oEvent.clientY-oDiv.offsetTop;
            console.log(x+'='+y);

        })
        */
        /**
         getComponentECharts().then(component => {
         //document.body.appendChild(component);
        })
        */

        //$('#eq').css('color','red');


        // 图表配置
        /*
        var options = {
            chart: {
                type: 'bar'                          //指定图表的类型，默认是折线图（line）
            },
            title: {
                text: '我的第一个图表'                 // 标题
            },
            xAxis: {
                categories: ['苹果', '香蕉', '橙子']   // x 轴分类
            },
            yAxis: {
                title: {
                    text: '吃水果个数'                // y 轴标题
                }
            },
            series: [{                              // 数据列
                name: '小明',                        // 数据列名
                data: [1, 0, 4]                     // 数据
            }, {
                name: '小红',
                data: [5, 7, 3]
            }]
        };
        // 图表初始化函数
        var chartHigh = highcharts.chart('container', options);
        */
        //$('#error').css('color','red');

    }

    render () {
        var classString = 'whole';
        var errorStyle = {
            fontSize: 35
        }
        return (
            <div id={'dd1'}>

                <h1 id={'draw01'} onMouseDown={this.handleDrawOn.bind(this)}>可拖拽永久保留拖拽后位置</h1>
                <div className={'b'}>
                    <p id='error' style={ errorStyle }>
                        暂时未能找到您查找的页面<br />
                        可能输入的网址错误或此页面不存在<br />
                        <span id='num'></span>秒后自动跳转到主页
                    </p>
                </div>

            </div>

        );
    }
}

export default NotFoundPage;

export function drawOn(x, y,dx,dy,div){
    var oDiv = div;
    console.log(x)
    console.log(y)
    console.log(dx)
    console.log(dy)

    document.onmousemove = function(){

        oDiv.style.left = x - dx + 'px';
        oDiv.style.top = y - dy + 'px';
    };
}