JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<table id="canvas">
<tr>
  <td><div class="bg-image"></div></td>
  <td><div class="bg-image"></div></td>
</tr>
<tr>
  <td><div class="bg-image"></div></td>
  <td><div class="bg-image"></div></td>
</tr>
</table>

CSS

.bg-image{
     background-image: url(https://preview.ibb.co/kEf8bQ/rhyms1.jpg);
    background-position: 0px 0px;
    background-size: 1000px;
    border: 1px solid red;
    width: 500px;
    height: 281px;
    float: left;
}

.ui-draggable-dragging{
  z-index:5;
}

#canvas{
  -webkit-transform: scale(0.2);
    -moz-transform: scale(0.2);
    -o-transform: scale(0.2);
    transform: scale(0.5);
    -webkit-transform-origin:left top;
    -moz-transform-origin:left top;
    transform-origin:left top;
}

JavaScript

$( ".bg-image" ).draggable({revert:true});