Show element under finger that was selected upon touchstart on mobile devices

Question

I am using jquery event detector for touchstart on an element in mobile devices.

Currently nothing is showing under the finger on mobile devices after touchstart fires (the border & background color are applied on the original element)- how do I get that element to show under the finger?

$('body').on('touchstart', '.draggable', function(evt) {
  evt.preventDefault();
  console.log('TouchStart Fired');
  $(this).css({
    'border-color': '#55ba76'
  });
  this.style.backgroundColor = "red";
});

.draggable { display: inline-block; border: 2px solid gold; }

<div class="draggable" draggable="true">
  <svg viewBox="0 0 1 1" style="width: 5rem;">
    <circle cx="0.5" cy="0.5" r="0.5" fill="#000" />
  </svg>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>