JSFiddle - React, Tailwind, and code Playground

by Alex Artyukh

HTML

<div id="wrapper">
    <div id="draggable" class="ui-widget ui-widget-content">
        <p>Drag me to trigger the chain of events.</p>
        <ul class="ui-helper-reset">
            <li id="event-start" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-play"></span>"start" invoked <span class="count">0</span>x</li>
            <li id="event-drag" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-arrow-4"></span>"drag" invoked <span class="count">0</span>x</li>
            <li id="event-stop" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-stop"></span>"stop" invoked <span class="count">0</span>x</li>
        </ul>
    </div>
</div>

CSS

#draggable {
    width: 16em;
    padding: 0 1em;
}
#draggable ul li {
    margin: 1em 0;
    padding: 0.5em 0;
}
* html #draggable ul li {
    height: 1%;
}
#draggable ul li span.ui-icon {
    float: left;
}
#draggable ul li span.count {
    font-weight: bold;
}
#wrapper {
    height:2000px;
}

JavaScript

$(function () {
    var $start_counter = $("#event-start"),
        $drag_counter = $("#event-drag"),
        $stop_counter = $("#event-stop"),
        counts = [0, 0, 0];
    var keys = {
        37: 1,
        38: 1,
        39: 1,
        40: 1
    };

    function preventDefault(e) {
        e = e || window.event;
        if (e.preventDefault) e.preventDefault();
        e.returnValue = false;
    }

    function preventDefaultForScrollKeys(e) {
        if (keys[e.keyCode]) {
            preventDefault(e);
            return false;
        }
    }

    function disableScroll() {
        if (window.addEventListener) // older FF
        window.addEventListener('DOMMouseScroll', preventDefault, false);
        window.onwheel = preventDefault; // modern standard
        window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
        window.ontouchmove = preventDefault; // mobile
        document.onkeydown = preventDefaultForScrollKeys;
    }

    function enableScroll() {
        if (window.removeEventListener) window.removeEventListener('DOMMouseScroll', preventDefault, false);
        window.onmousewheel = document.onmousewheel = null;
        window.onwheel = null;
        window.ontouchmove = null;
        document.onkeydown = null;
    }
    $("#draggable").draggable({
        start: function () {
            disableScroll();
            counts[0]++;
            updateCounterStatus($start_counter, counts[0]);
        },
        drag: function () {

            counts[1]++;
            updateCounterStatus($drag_counter, counts[1]);
        },
        stop: function () {
            enableScroll();
            counts[2]++;
            updateCounterStatus($stop_counter, counts[2]);
        }
    });

    function updateCounterStatus($event_counter, new_count) {
        // first update the status visually...
        if (!$event_counter.hasClass("ui-state-hover")) {
            $event_counter.addClass("ui-state-hover")
               ...