JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <p>Click link to toggle throbble. Drag link to sort</p>
    <ul>
        <li><a href="#">Some link #1</a></li>
        <li><a href="#">Some link #2</a></li>
        <li><a href="#">Some link #3</a></li>
        <li><a href="#">Some link #4</a></li>
    </ul>

    <div id="throbble">
    <img src="http://dummyimage.com/100x50/000/fff&text=Throbble!">
    </div>
</div>

CSS

#throbble { display: none }

JavaScript

$(function() {
    var dragged = 0;
    var threshold = 2;
    $("a")
    .mousedown(function() {
        dragged = 0;
    })
    .mousemove(function() {
        dragged++;
     })
    .mouseup(function() {
        if (dragged < threshold) {
            $("#throbble").toggle();
        }
        dragged = 0;
    });

    $("ul").sortable();
});