JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="jardin">
    <li class="fruit">fraise</li>
    <li class="fruit">banane</li>
    <li class="fruit">pêche</li>
</ul>

<div class="corbeille">
    
</div>

<div class="corbeille">
    
</div>

CSS

.corbeille {
    border: 1px solid black;
    width: 30%;
    min-height: 30px;
    float: left;
}

JavaScript

$(document).ready(function() {
    $('.jardin li').draggable({
        helper: function(event, ui) {
            return $('<div id="draggableHelper"></div>').html('Déplacer <strong>' + $(this).text() + '</strong>');
        },
        connectToSortable: '.corbeille'
    });

    $('.corbeille').droppable({
        accept: '.fruit',
        drop: function(event, ui) {
            $("<div></div>").text(ui.draggable.text()).appendTo(this);
            return false;
        }
    }).sortable({
        connectWith: '.corbeille',
        placeHolder: 'ui-state-highlight'
    });
});