how to use draggable() in modal?

how to use draggable() in modal?

I'm trying to use draggable() within modal.
it works perfectly outside of modal but doesn't work when I use it in modal.
Would you tell me what the problem and how to fix this?


here is my code and view.


Thank you.


<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/5zo/view/CSS/imageMapWidget.css" rel="stylesheet" type="text/css">
<link href="/5zo/view/CSS/videoWidget.css" rel="stylesheet" type="text/css" >
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src=" https://code.jquery.com/jquery-3.2.1.min.js"> </script>
<script src=" https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }


</style>


</head>


<body>


<!-- The Modal -->
<div id="myModal" class="modal">


<!-- Modal content -->
<div class="modal-content">




<div class="modal-header" align="center">

<span class="close">&times;</span>


<h3>video setting</h3>

</div>


<div class="modal-body" id="body" >


<div id="draggable" class="ui-widget-content">

<p >Drag me around</p>


</div>


</div>
</div>
</div>




<script>
// Get the modal
var modal = document.getElementById('myModal');


// Get the button that opens the modal
var btn = document.getElementById("_setting");


// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];


// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}


// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}


// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}




$( function() {
$( "#draggable" ).draggable();
} );




</script>
</body>
</html>