JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="dialable">
        <p>Jimmy Rockysocks</p>
    </li>
    <li class="dialable">
        <p>Suzy Sandstorm</p>
    </li>
    <li class="dialable">
        <p>Jennifer Gumbo</p>
    </li>
    <li class="dialable">
        <p>Richard Metalmorph</p>
    </li>
    <li class="dialable">
        <p>Sarah Cope</p>
    </li>
</ul>

<div id="dialer"/>

CSS

* { margin: 0; padding: 0; }
html { background: #eee; }
body { font: 14px Georgia, serif; }
#page-wrap { width: 250px; margin: 60px auto; }
ul { width: 250px; margin: 30px auto; }
ul { list-style: none; border: 3px solid #ccc; }
li { position: relative; padding: 20px; font: 12px "Lucida Grande", Arial, Sans-Serif; background: white; }
li:nth-child(odd) { background: whiteSmoke; }

#dialer
{
    position:absolute;
    width: 128px;
    height: 128px;
    display:none;
    background-image:url('http://dirtydisco.bergrakkers.be/dials/view.png');
    left:0px;
    top:0px;
}
}

JavaScript

var xDown = 0;
var yDown = 0;
var transX = 0;
var transY = 0;
var action = "view";
var isMouseDown = false;
var selectedItem = false;
var state = "normal";

function removeItem(element) {
    $(element).remove();
}

function getDialableParent(element) {
    return $(element).closest('.dialable');
}

function setDialerImage(currentAction) {
    $('#dialer').css('background-image', 'url(\'http://dirtydisco.bergrakkers.be/dials/' + currentAction + '.png\')');
}


$(document).mousedown(function(e) {
    getDialableParent(e.target).disableOtherInteraction();

    // initialise and display the dialer
    if (state == "normal" && getDialableParent(e.target).hasClass('dialable')) {

        selectedItem = getDialableParent(e.target);
        xDown = e.pageX;
        yDown = e.pageY;
        transX = 0;
        transY = 0;
        action = "view";
        isMouseDown = true;
        $('#clicked').html(xDown + ', ' + yDown);
        $('#dialer').css('left', xDown - 64);
        $('#dialer').css('top', yDown - 64);
        $('#dialer').fadeIn(100);
        setDialerImage(action);
    }
    
    // handle a delete confirmation
    if (state == "confirm") {
        if (e.pageX < xDown) {
            removeItem(selectedItem);
        }
        state = "normal";
        //action = "view";
    }
});




$(document).mouseup(function(e) {
    isMouseDown = false;
    if (state == "normal") {
        $('#dialer').fadeOut(200);

        // execute the selected action
        if (action == "delete") {
            action = "confirm";
            state = "confirm";
            setDialerImage(action);
            $('#dialer').fadeIn(100);
        }
        // reset the view and console message
        action = "view";
    }

});

$(document).mousemove(function(e) {
    if (state == "normal") {
        if (isMouseDown) {
            transX = e.pageX - xDown;
            transY = e.pageY - yDown;

            // first if checks if there is a minimum of mouse movement before starting the...