JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="toddler"></div>
</div>

CSS

div.wrapper {
    width: 400px;
    height: 400px;
    border: 1px solid black;
    position: relative;
}

.toddler {
    width: 10px;
    height: 10px;
    background: red;
    position: absolute;
    top: 20px;
    left: 10px;
}

JavaScript

$.fn.slider = function () {
    $(this).on("mousedown", function () {
        $dragging = true;
    });

    $(this).on("mouseup", function () {
        $dragging = null;
    });
    
    $(this).on("mousemove", function () {
        if ($dragging) {
            $(this).offset({
                left: $(this).pageX
            });
        }
    });
};

$(".toddler").slider();