JSFiddle - React, Tailwind, and code Playground

by techattitude

HTML

<script src="https://code.jquery.com/jquery-1.12.0.js"></script>
<body>

    <div id="drag">

    </div>
    


</body>

CSS

#drag {
        width: 20px;
        height: 20px;
        border-radius:10px;
        background: #ccc;
        position: fixed;
    }

JavaScript

$(document).ready(function () {
    $('#drag').mousedown(function(){
        $(document).mousemove(function(event){
            $('#drag').css({'left':event.pageX,'top':event.pageY});
            
        });
    });
    $(document).mouseup(function(){
        $(this).off('mousemove');
        $('#drag').css({'left':'','top':''})
    });  
});