JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<ul id="sortable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<div id="consolelog"></div>
CSS
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
border: 1px solid black;
list-style:none;
margin:0;
padding:3px;
height: 60px;
}
p {
margin: 0
}
#consolelog {
margin-top: 20px;
background: #ccc;
width: 100%;
height: 200px;
}
JavaScript
$(function () {
$("#sortable").sortable({
axis: "y",
revert: 100
});
$("#sortable").on("taphold", function () {
$("#consolelog").append("<p>TapHold Pressed</p>");
});
});