JSFiddle - React, Tailwind, and code Playground

by jnbdz

HTML

<div id="drag"></div>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some text!</p>
<p>Some...

CSS

#drag {
    position: absolute;
    background-color: blue;
    width: 50px;
    height: 50px;
    cursor: move;
}

JavaScript

new Drag.Move('drag', {
    container: document.body
});

var mouseScroll = new Class({

    Implements: [Events],
    
    setMouseScroll: function(container){
        this.container = document.id(container);
        if (this.container && typeOf(this.container) != 'element')
            this.container = document.body;
    },
    
    mouseScrollFollow: function(){
        
        clearInterval(this.mouseScrollScrollPeriodical);
            
        this.scrollSize = window.getScrollSize();
        this.winSize = window.getSize();
        this.winSizeY = this.winSize.y;
        this.winSizeX = this.winSize.x;
        this.clientY = e.client.y;
        this.clientX = e.client.x;
        this.scrollToX = 0;
        this.scrollToY = 0;

        // For the Bottom
        if ((this.winSizeY - 5).abs() < this.clientY) {
            this.scrollToY = 30;
        } else if((this.winSizeY - 10).abs() < this.clientY) {
            this.scrollToY = 20;
        } else if((this.winSizeY - 20).abs() < this.clientY) {
            this.scrollToY = 10;
        }
        // For the Top
        else if(5 > this.clientY) {
            this.scrollToY = -30;
        } else if(10 > this.clientY) {
            this.scrollToY = -20;
        } else if(20 > this.clientY) {
            this.scrollToY = -10;
        }

        // For the Right
        if ((this.winSizeX - 5).abs() < this.clientX) {
            this.scrollToX = 30;
        } else if((this.winSizeX - 10).abs() < this.clientX) {
            this.scrollToX = 20;
        } else if((this.winSizeX - 20).abs() < this.clientX) {
            this.scrollToX = 10;
        }
        // For the Left
        else if(5 > this.clientX) {
            this.scrollToX = -30;
        } else if(10 > this.clientX) {
            this.scrollToX = -20;
        } else if(20 > this.clientX) {
            this.scrollToX = -10;
        }

        if(this.scrollToX != 0 || this.scrollToY != 0) {
            this.periodicalRectChange =...