JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="list">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
</ul>

CSS

li{
    cursor: pointer;
    width: 200px;
    height: 20px;
    border-radius: 8px;
    background: #eee;
    margin: 5px;
    padding: 5px;
    text-indent: 10px;
    text-transform: capitalize;
}
ul{
    list-style-type: none;
}

JavaScript

$(document).ready(function () {
    $('#list').sortable();
    var longpress = false, startTime, endTime;
    function myfunction(){
        alert('clicked');
    }

    $("#list li").on('click', function (e) {
        if (!longpress) myfunction();
    });

    $("#list li").on('taphold', function () {
        startTime = new Date().getTime();
    });

    $("#list li").on('mouseup', function () {
        endTime = new Date().getTime();
        longpress = (endTime - startTime < 250) ? false: true;
    });
    
});