JSFiddle - React, Tailwind, and code Playground

by Artur Teregulov

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<ul class="source"> 
    <li class="ui-state-default">Наличные</li>
    <li class="ui-state-default">Карта</li>
</ul>

<ul class="destination"> 
    <li class="ui-state-default">Еда</li>
    <li class="ui-state-default">Развлечения</li>
</ul>

CSS

.source .ui-selecting { background: #FECA40; }
.source .ui-selected { background: #F39814; color: white; }
.source { list-style-type: none; margin: 0; padding: 0; width: 450px; }
.source li { margin: 3px; padding: 1px; float: left; width: 200px; height: 80px; font-size: 1em; text-align: center; }

.destination .ui-selecting { background: #FECAf0; }
.destination .ui-selected { background: #F398b4; color: white; }
.destination { list-style-type: none; margin: 0; padding: 0; width: 450px; }
.destination li { margin: 3px; padding: 1px; float: left; width: 200px; height: 80px; font-size: 1em; text-align: center; }

JavaScript

$(function() {

$( ".source li" ).draggable({
appendTo: "body",
helper: "clone"
});
$( ".destination li" ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
$( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
}
})
});