JSFiddle - React, Tailwind, and code Playground

by ClarenceDowns

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!doctype html>
<html>

  <head>
  </head>

  <body>
    <h1>Welcome to GeeksforGeeks</h1>
    <div id="d1">
      <p>Drag Me Anywhere</p>
    </div>
    <div id="d2">
      <p>Drag Me Horizontally</p>
    </div>
    <div id="d3">
      <p>Drag Me Vertically</p>
    </div>
  </body>

</html>

CSS

#d1 {
  width: 120px;
  height: 120px;
  background-color: aqua;
  padding: 20px;
  float: left;
  margin: 5px;
}

#d2 {
  width: 120px;
  height: 120px;
  background-color: orange;
  padding: 20px;
  float: left;
  margin: 5px;
}

#d3 {
  width: 120px;
  height: 120px;
  background-color: yellow;
  padding: 20px;
  float: left;
  margin: 5px;
}

JavaScript

$(function() {
        $("#d1").draggable();
      });
      $(function() {
        $("#d2").draggable({
          axis: "x"
        });
      });
      $(function() {
        $("#d3").draggable({
          axis: "y"
        });
      });