JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<div class="ui-widget ui-helper-clearfix">
  <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
    <li class="ui-widget-content ui-corner-tr">
      <h5 class="ui-widget-header">Peaks</h5>
      <img src="http://thumb1.shutterstock.com/display_pic_with_logo/278821/252659818/stock-photo-beautiful-view-of-mount-ama-dablam-way-to-everest-base-camp-nepal-252659818.jpg" alt="" width="96" height="72">
      <a href="" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
      <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
    </li>
    <li class="ui-widget-content ui-corner-tr">
      <h5 class="ui-widget-header">Rock</h5>
      <img src="http://thumb9.shutterstock.com/display_pic_with_logo/1516148/324716942/stock-photo-landscape-of-zhangjiajie-taken-from-old-house-field-located-in-wulingyuan-scenic-and-historic-324716942.jpg" alt="" width="96" height="72">
      <a href="http://thumb9.shutterstock.com/display_pic_with_logo/1516148/324716942/stock-photo-landscape-of-zhangjiajie-taken-from-old-house-field-located-in-wulingyuan-scenic-and-historic-324716942.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
      <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
    </li>
    <li class="ui-widget-content ui-corner-tr">
      <h5 class="ui-widget-header">High Tatras 3</h5>
      <img src="images/high_tatras3_min.jpg" alt="Planning the ascent" width="96" height="72">
      <a href="images/high_tatras3.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
      <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
    </li>
    <li class="ui-widget-content ui-corner-tr">
      <h5 class="ui-widget-header">High Tatras 4</h5>
      <img src="images/high_tatras4_min.jpg"...

CSS

#gallery {
    float: left;
    width: 65%;
    min-height: 12em;
  }
  
  .gallery.custom-state-active {
    background: #eee;
  }
  
  .gallery li {
    float: left;
    width: 96px;
    padding: 0.4em;
    margin: 0 0.4em 0.4em 0;
    text-align: center;
  }
  
  .gallery li h5 {
    margin: 0 0 0.4em;
    cursor: move;
  }
  
  .gallery li a {
    float: right;
  }
  
  .gallery li a.ui-icon-zoomin {
    float: left;
  }
  
  .gallery li img {
    width: 100%;
    cursor: move;
  }
  
  .folder {
    float: right;
    width: 30%;
    min-height: 6em;
    padding: 1%;
    margin: 3px 0;
  }
  
  .folder h4 {
    line-height: 16px;
    margin: 0 0 0.4em;
  }
  
  .folder h4 .ui-icon {
    float: left;
  }
  
  .folder .gallery h5 {
    display: none;
  }

JavaScript

$(function() {
  // there's the gallery and the trash
  var $gallery = $("#gallery"),
    $trash = $("#trash"),
    $folder_1 = $("#folder-1"),
    $folder_2 = $("#folder-2");

  // let the gallery items be draggable
  $("li", $gallery).draggable({
    cancel: "a.ui-icon", // clicking an icon won't initiate dragging
    revert: "invalid", // when not dropped, the item will revert back to its initial position
    containment: "document",
    helper: "clone",
    cursor: "move"
  });

  // let the trash be droppable, accepting the gallery items
  $trash.droppable({
    accept: "#gallery > li",
    activeClass: "ui-state-highlight",
    drop: function(event, ui) {
      deleteImage(ui.draggable);
    }
  });
  $folder_1.droppable({
    accept: "#gallery > li",
    activeClass: "ui-state-highlight",
    drop: function(event, ui) {
      moveImage(ui.draggable, event.target.id);
    }
  });
  $folder_2.droppable({
    accept: "#gallery > li",
    activeClass: "ui-state-highlight",
    drop: function(event, ui) {
      moveImage(ui.draggable, event.target.id);
    }
  });

  // let the gallery be droppable as well, accepting items from the trash
  $gallery.droppable({
    accept: "#trash li",
    activeClass: "custom-state-active",
    drop: function(event, ui) {
      recycleImage(ui.draggable);
    }
  });

  // image deletion function
  var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Recycle this image' class='ui-icon ui-icon-refresh'>Recycle image</a>";

  function moveImage($item, t) {
    console.log("Image moving to " + t);
    var $target = $("#" + t);
    $item.fadeOut(function() {
      var $list = $("ul", $target).length ? $("ul", $target) : $("<ul class='gallery ui-helper-reset'/>").appendTo($target);
      $item.find("a.ui-icon-trash").remove();
      $item.append(recycle_icon).appendTo($list).fadeIn(function() {
        $item.animate({
          width: "48px"
        })
        .find("img")
        .animate({
         ...