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();
});