JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
</head>

<body>
    
<div class="page">
    <div class="dragdiv">
        <div class="draghandle"></div>
    </div>
</div>

</body>
</html>

CSS

.page
{
height: 2000px;
width: 400px;
background-color:#DDDDDD;
}

.dragdiv
{
    background-color: red;
    width: 200px;
    height: 300px;
    float: left;
}
.draghandle
{
    width: 30px;
    height: 20px;
    background-color: green;
}

JavaScript

jQuery(".dragdiv").draggable
({
    //handle: '.draghandle',
    //activeClass: "ui-state-default",
    //hoverClass: "ui-state-hover",
    scroll:true,
    revert: false,
    start: function(event, ui)
    {
        if($.browser.msie || $.browser.mozilla)
        {
          $(this).data("startingScrollTop", $('html').scrollTop());
        }
        else
        {
          $(this).data("startingScrollTop", $('body').scrollTop());
        }
    },
    
    drag: function(event, ui)
    {
        var st = parseInt($(this).data("startingScrollTop"));
        if($.browser.msie || $.browser.mozilla)
        {
          ui.position.top -= $('html').scrollTop() - st;
        }
        else
        {
          ui.position.top -= $('body').scrollTop() - st;
        }
    }
});