JavaScript to achieve simple drag effect

//html
<div>
    <p>I am a blue box</p>
</div>

CSS
*{margin: 0;padding: 0;}
        div{
            width: 100px;
            height: 100px;
            background-color: cornflowerblue;
            position: absolute;
        }
        p{
            width: 100px;
            height: 100px;
            line-height: 100px;
            font-size: 10px;
            color: #fff;
            text-align: center;
            transition: .5s all;
        }
        p:hover{
            transform: translateY(-5px);
            transition: .5s all;
            box-shadow: 10px 10px 5px gray;
}

var div = document.querySelector('div');
        var p = document.querySelector('p');
        //First define and initialize variables x and y
        var x =0;
        var y = 0;
        // var i = 3;
        var TorF = false;
        //The text in the box cannot be selected div.onselectstart = function (e) {
            return false;
        }
        div.addEventListener('mousedown',function(e){
            // client: Output the coordinates of the mouse pointer when the mouse button is pressed x = e.clientX;
            y = e.clientY;
            // Format: obj.offsetLeft: Get the left and top offsets // Special note here: This property is read-only and cannot be assigned a value.
            // Returns the distance between the current element and the left side of the parent element (body). // Here, l and t do not declare a global variable, but create a property of a global object.
            l = div.offsetLeft;
            t = div.offsetTop;
            // Mouse settings move arrow div.style.cursor = 'move';
            p.innerHTML = 'I was pressed ^_^';
            TorF=true;
        });
        // When the entire screen triggers a move event document.addEventListener('mousemove',function(e){
            // If it is false, terminate the execution of the function and return the function value if (Torf == false) {
                return; 
            }
            // Define local variables in this function var twox = e.clientX;
            var twoy = e.clientY;
            // Use the obtained coordinates of the mouse pointer - (the coordinates of the mouse pointer - the offset) = the actual position of the mouse drag // The px unit must be added at the end, because the original acquisition has no unit var twol = twox - (xl);
            var twot = twoy - (yt); 
            div.style.left = twol+'px';
            div.style.top = twot+'px';
            p.innerHTML = 'I am being dragged-.-';
        });
        div.addEventListener('mouseup',function(){
            // Stop mouse movement events when releasing the keyboard TorF= false;
            // The mouse restores the default style div.style.cursor = 'default';
            p.innerHTML = 'I was bounced QAQ';
 })