JSFiddle - React, Tailwind, and code Playground

HTML

<div class="draggable">
    <input type="text" value="drag me!" />
</div>

CSS

.draggable {
    height:500px;
    width:500px;
    background:blue;
}

JavaScript

$(".draggable").draggable({
    start: function (event, ui) {
        $(this).data('preventBehaviour', true);
    }
});
$(".draggable :input").on('mousedown', function (e) {
    var mdown = document.createEvent("MouseEvents");
    mdown.initMouseEvent("mousedown", false, true, window, 0, e.screenX, e.screenY, e.clientX, e.clientY, true, false, false, true, 0, null);
    $(this).closest('.draggable')[0].dispatchEvent(mdown);
}).on('click', function (e) {
    var $draggable = $(this).closest('.draggable');
    if ($draggable.data("preventBehaviour")) {
        e.preventDefault();
        $draggable.data("preventBehaviour", false)
    }
});