JSFiddle - React, Tailwind, and code Playground

by Stephen Herd

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Shopping Cart</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0">
    <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  </head>

  <body>
    <div id="container">
      <header>
        <h1>Potter's Field</h1>
      </header>

      <h2>Roses</h2>
      <div id="pics">
        <img src="https://mywebtraining.net/articles/images/rose1.jpg" alt="Fragrant Cloud Rose" title="Fragrant Cloud Rose" width="70">
        <img src="https://mywebtraining.net/articles/images/rose2.jpg" alt="Double Delight Rose" title="Double Delight Rose" width="70">
        <img src="https://mywebtraining.net/articles/images/rose3.jpg" alt="Rose Mister Lincoln" title="Rose Mister Lincoln" width="70">
      </div>
      <div id="myCart">
        <h3>Shopping Cart</h3>
        <ul id="buggy" class="connectedSortable">
        </ul>
      </div>
      <footer>
        <hr>
        <p><small id="copy">&copy; Copyright </small></p>
      </footer>
    </div>
  </body>

</html>

CSS

#myCart {
  width: 85%;
  background-color: cornsilk;
  border: thin darkgreen solid;
  padding: .5em 1em;
  float: left;
  margin: 1em;
  min-height: 150px;
}

footer {
  clear: both;
}

#pics {
  position: relative;
}

li {
  list-style-type: none;
}

JavaScript

$(document).ready(function() {
  $('#pics img').draggable({
    revert: true
  });

  $('#myCart').droppable({
    drop: function(event, ui) {
      $alt = (ui.draggable.attr('alt'));
      // test to see if the draggable item has an alt attribute
      if ($alt) {
        $(this)
          .find("ul")
          // if it has an alt attribute, append the alt text inside of an li tag
          .append("<li>" + $alt + "</li>");
      }
    }
  });

  $('#buggy').sortable();
});