JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<div id="wrapper">
<br>
<div id="myContainer" class="ui-widget">
<div class="ui-widget-content">Turtle</div>
<div class="ui-widget-content">Tiger</div>
<div class="ui-widget-content">Cow</div>
<div class="ui-widget-content">Panda</div>
<div class="ui-widget-content">Kangoroo</div>
<div class="ui-widget-content">Koala</div>
<div class="ui-widget-content">Frog</div>
<div class="ui-widget-content">Troll</div>
<div class="ui-widget-content">Lion</div>
<div class="ui-widget-content">Gorilla</div>
<div class="ui-widget-content">Snake</div>
<div class="ui-widget-content">Cougar</div>
<div class="ui-widget-content">Duck</div>
</div>
<br>
</div>
CSS
#myContainer {
width:100%;
position: relative;
min-height: 20px;
margin: 0;
margin-right: 10px;
text-align: center;
}
#myContainer div {
margin: 0px 5px 5px 5px;
padding: 5px;
font-size: 1.5em;
-ms-touch-action: none;
}
.draggedDiv{
background-color: mediumspringgreen !important;
color: white !important;
}
div.ui-widget-content{
border: 2px solid violet;
}
JavaScript
$("#myContainer").sortable({
start: function( event, ui ) {
$(ui.item).addClass("draggedDiv");
},
stop:function( event, ui ) {
$(ui.item).removeClass("draggedDiv");
}
})
$("#myContainer").disableSelection();
$("#myContainer").sortable("option", "axis", "y");
$("#myContainer" ).sortable( "option", "containment", document.getElementById("wrapper") );