JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.theme.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<h1>
Draggable - ignores translate3d transform
</h1>
<div style="transform-style: preserve-3d; background-color: yellow;">

  <div style="width: 90px; height: 90px; " id="blue" class="draggable">
    <div style="width: 90px; height: 10px; position: absolute; top: -10px; transform: translate3d(0, 0, 25px)"></div>
    <img style="background-color: blue; width: 90px; height: 90px; transform: translate3d(0, 0, 50px)">
  </div>
  <div style="width: 90px; height: 90px;" id="orange" class="draggable">
    <div style="width: 90px; height: 10px; position: absolute; top: -10px; transform: translate3d(0, 0, 25px)"></div>
    <img style="background-color: orange; width: 90px; height: 90px; transform: translate3d(0, 0, 50px)">
  </div>

</div>

<h1>
Not draggable - obeys translate3d transform
</h1>
<div style="transform-style: preserve-3d">

  <div style="width: 90px; height: 90px;" id="blue" class="notdraggable">
    <div style="width: 90px; height: 10px; background-color: yellow; position: absolute; top: -10px; transform: translate3d(0, 0, 25px)"></div>
    <img style="background-color: blue; width: 90px; height: 90px; transform: translate3d(0, 0, 50px)">
  </div>
  <div style="width: 90px; height: 90px;" id="orange" class="notdraggable">
    <div style="width: 90px; height: 10px; background-color: yellow; position: absolute; top: -10px; transform: translate3d(0, 0, 25px)"></div>
    <img style="background-color: orange; width: 90px; height: 90px; transform: translate3d(0, 0, 50px)">
  </div>

</div>

JavaScript

$(document).ready(
    
    
    function()
    {
    $(".draggable").draggable();
    }
    );