JSFiddle - React, Tailwind, and code Playground

by Park Mino

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 isDragging = false;
    $("a")
    .mousedown(function() {
        isDragging = false;
    })
    .mousemove(function() {
        isDragging = true;
     })
    .mouseup(function() {
        var wasDragging = isDragging;
        isDragging = false;
        if (!wasDragging) {
            $("#throbble").toggle();
        }
    });

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