JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box">
    box lol
</div>

<div id="pony">drag</div>

<br/>
<a href="#">do it!</a>

CSS

body{
    overflow:hidden;
}

#pony{
    border: 1px solid #ccc;
    padding: 10px;
    display: inline-block;   
}

#box{
    position: absolute;
    top: 40px;
    right: -380px;
    padding: 20px;
    background: #eee;
    width: 400px;
    transition: .3s;
}

#box:hover, #box.active{
    right: 0;
    background: #ccc;
}

JavaScript

$('#pony').draggable({
    revert: false,
    containment: 'document',
    helper: 'clone',
    cursor: 'move'
});
 
$('#box').droppable({
    accept: '#pony',
    activeClass: 'active',
    tolerance: 'touch',
    drop: function(event, ui){
        $(this).append(ui.draggable);
    }
 });

$('a').on('click', function(){
  $('#pony').trigger('drag', [$('#box')]);   
});