JSFiddle - React, Tailwind, and code Playground

by Apeksha Shah

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<!--script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script-->

<div id="container">
  <div id="navi">
    <img src="https://img.clipartfest.com/e1a40c7a74a462c231e5fcf41bed6ac3_clip-art-tiny-mice-clipart-small-clip-art-images_150-150.jpeg" />
  </div>
  <div id="infoi">
    <img src="https://img.clipartfest.com/e1a40c7a74a462c231e5fcf41bed6ac3_clip-art-tiny-mice-clipart-small-clip-art-images_150-150.jpeg" style="position: absolute;" />
  </div>
</div>

CSS

#container {
  width: 100px;
  height: 100px;
  position: relative;
}

#navi,
#infoi {
  position: absolute;
  top: 0;
  left: 0;
}

#infoi {
  z-index: 10;
  background-color: lightblue;
  width: 380px;
  height: 170px;
  overflow: hidden;
}

#navi {
  opacity: 0.3;
  z-index: -99;
}

JavaScript

$(document).ready(function() {
  var r1 = $("#navi").width() / $("#navi").height();
  var r2 = $("#infoi").width() / $("#infoi").height();
  debugger;
  if (r1 > r2) {
    $("#navi img").height($("#infoi").height());
    $("#infoi img").height($("#infoi").height());
  } else if (r1 < r2) {
    $("#navi img").width($("#infoi").width());
    $("#infoi img").width($("#infoi").width());
  }
});
$("#navi").draggable({
  stop: function() {
    if ($(this).position().left > 0) {
      $(this).css({
        left: 0
      });
    }

    if ($(this).width() + $(this).position().left < $("#infoi").width()) {
      $(this).css({
        left: -1 * ($(this).width() - $("#infoi").width())
      });
    }

    if ($(this).position().top > 0) {
      $(this).css({
        top: 0
      });
    }

    if ($(this).height() + $(this).position().top < $("#infoi").height()) {
      $(this).css({
        top: -1 * ($(this).height() - $("#infoi").height())
      });
    }

    $("#infoi img").css({
      top: $(this).position().top,
      left: $(this).position().left
    });

  },
  drag: function() {
    $("#infoi img").css({
      top: $(this).position().top,
      left: $(this).position().left
    });
  }
});

$("#infoi img").draggable({
  stop: function() {
    if ($(this).width() + $(this).position().left < $("#infoi").width()) {
      $(this).css({
        left: -1 * ($(this).width() - $("#infoi").width())
      });
    }

    if ($(this).position().left > 0) {
      $(this).css({
        left: 0
      });
    }

    if ($(this).height() + $(this).position().top < $("#infoi").height()) {
      $(this).css({
        top: -1 * ($(this).height() - $("#infoi").height())
      });
    }

    if ($(this).position().top > 0) {
      $(this).css({
        top: 0
      });
    }

    $("#navi").css({
      top: $(this).position().top,
      left: $(this).position().left
    });
  },
  drag: function() {
    $("#navi").css({
      top: $(this).position().top,
      left:...