how to make bootstrap modal draggable and scrollable on android device

I am having an issue with a bootstrap modal which should be draggable and scrollable. On desktop it works fine, but on my android device, it does not scroll anymore when it is draggable. It's like "frozen". When i disable draggable, scrollable works fine again.

I am using jQuery UI for making it draggable:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

      some long content goes here
 
        </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
// make modal resizable and draggable
$('.modal-content').resizable({
  minHeight: 300,
  minWidth: 300
});
$('.modal-dialog').draggable(); // here seems to be the issue on android device; when disabled, scrollable but not draggable, when enabled, draggable but not scrollable on android
</script>

I have created a fiddle where you can see the behaviour: FIDDLE

$('.modal-dialog').draggable({
    handle: ".modal-header"
});

This should solve your issue

Fiddle