JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/sunny/jquery-ui.css">
    <div id="dropContainer">
        <div id="fitDrop" class="droppable">
            <span>Fit</span>
        </div>
        <div id="touchDrop" class="droppable">
            <span>Touch</span>
        </div>        
    </div>
    <div class="draggable ui-widget ui-corner-all ui-state-error">
        <span>Перетащи меня</span>
    </div>

CSS

.draggable, .droppable {font-size: large; border: thin solid black; padding: 4px;
            width: 100px; text-align: center; background-color: lightgray;}
        .droppable {margin-bottom: 10px; margin-right: 5px; height: 60px; width: 120px}
        #dropContainer {position: absolute; right: 5px;}
        div span {position: relative; top: 25%}
        .droppable.active {border: thick solid green}
        .droppable.hover {background-color: lightgreen}

JavaScript

$('.draggable').draggable();
    
    $('.droppable').droppable({
        drop: function(event, ui) {
            ui.draggable.text("Оставлено")
        },
        activeClass: "active",
        hoverClass: "hover",
        tolerance: "fit",
        drop: function() {  
            $(this).html('новое имя')
        },
    });
	
	$('#touchDrop').droppable("option", "tolerance", "touch");