JSFiddle - React, Tailwind, and code Playground

by Yogesh Salgar

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>
<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() {
        $(window).mousemove(function() {
            isDragging = true;
            $(window).unbind("mousemove");
        });
    })
    .mouseup(function() {
        var wasDragging = isDragging;
        isDragging = false;
        $(window).unbind("mousemove");
        if (!wasDragging) {
            $("#throbble").toggle();
        }
    });

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