JSFiddle - React, Tailwind, and code Playground

HTML

<style>
    #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; background: #ff0000;}
    #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; background: #00ff00;}
    </style>
    <script>
    $(function() {
        $( "#draggable" ).draggable();
        $( "#droppable" ).droppable({
            drop: function( event, ui ) {
                $( this )
                    .addClass( "ui-state-highlight" )
                    .find( "p" )
                        .html( "Dropped!" );
            }
        });
    
        
    var xxx = function() {
        $("#draggable").simulate("drag", {
                                                    dx: 120,
                                                    dy: 60
                                                });
            alert("done!");
        };
    
     $('document').ready(function() {setTimeout(xxx,2000) });   
 });


    </script>



<div class="demo">
    
<div id="draggable" class="ui-widget-content">
    <p>Drag me to my target</p>
</div>

<div id="droppable" class="ui-widget-header">
    <p>Drop here</p>
</div>

</div><!-- End demo -->



<div style="display: none;" class="demo-description">
<p>Enable any DOM element to be droppable, a target for draggable elements.</p>
    
</div><!-- End demo-description -->

JavaScript

/*
 * jquery.simulate - simulate browser mouse and keyboard events
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 */

;(function($) {

$.fn.extend({
    simulate: function(type, options) {
        return this.each(function() {
            var opt = $.extend({}, $.simulate.defaults, options || {});
            new $.simulate(this, type, opt);
        });
    }
});

$.simulate = function(el, type, options) {
    this.target = el;
    this.options = options;

    if (/^drag$/.test(type)) {
        this[type].apply(this, [this.target, options]);
    } else {
        this.simulateEvent(el, type, options);
    }
}

$.extend($.simulate.prototype, {
    simulateEvent: function(el, type, options) {
        var evt = this.createEvent(type, options);
        this.dispatchEvent(el, type, evt, options);
        return evt;
    },
    createEvent: function(type, options) {
        if (/^mouse(over|out|down|up|move)|(dbl)?click$/.test(type)) {
            return this.mouseEvent(type, options);
        } else if (/^key(up|down|press)$/.test(type)) {
            return this.keyboardEvent(type, options);
        }
    },
    mouseEvent: function(type, options) {
        var evt;
        var e = $.extend({
            bubbles: true, cancelable: (type != "mousemove"), view: window, detail: 0,
            screenX: 0, screenY: 0, clientX: 0, clientY: 0,
            ctrlKey: false, altKey: false, shiftKey: false, metaKey: false,
            button: 0, relatedTarget: undefined
        }, options);

        var relatedTarget = $(e.relatedTarget)[0];

        if ($.isFunction(document.createEvent)) {
            evt = document.createEvent("MouseEvents");
            evt.initMouseEvent(type, e.bubbles, e.cancelable, e.view, e.detail,
                e.screenX, e.screenY, e.clientX, e.clientY,
                e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
                e.button,...