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.

<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="//">
<script src=""> </script>
<script src=""></script>

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




<!-- 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 class="modal-body" id="body" >

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

<p >Drag me around</p>



// 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() { = "block";

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

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

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