UIKIT draggable modal

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.23.0/css/uikit.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.23.0/js/uikit.min.js"></script>
<button class="uk-button" data-uk-modal="{target:'#modal1', bgclose:false, modal:false}">Open Modal 1</button>

<!-- This is the modal 1-->
<div id="modal1" class="uk-modal">
  <div class="uk-modal-dialog uk-modal-dialog-large draggable">
    <div class="uk-modal-header">
      <h2>Modal 1</h2></div>
    <a data-uk-modal="{target:'#modal2'}">Open second modal</a>
    <div class="uk-modal-footer">
      <button class="uk-button uk-modal-close" href="#">Save</button>
    </div>

  </div>
</div>

<!-- This is the modal 2-->
<div id="modal2" class="uk-modal">
  <div class="uk-modal-dialog draggable">
    <div class="uk-modal-header">
      <h2>Modal 2</h2></div>
    <div class="uk-modal-footer">
      <a class="uk-button uk-modal-close" href="#" data-uk-modal="{target:'#modal1'}">Save</a>
    </div>
  </div>
</div>

CSS

.uk-modal {
  background: transparent
}
#modal1 > uk-modal-dialog {
  min-height: 400px;
  border-radius: 5px;
}
#modal2 > uk-modal-dialog {
  min-height: 300px;
  border-radius: 5px;
}
.draggable {
  box-shadow: 1px 1px 20px 5px #F3F3F3;
}

JavaScript

$(document).ready(function() {
$(".draggable").draggable({
  handle: ".uk-modal-header",
  cursor: "move"
});
});

/*$('.uk-modal').on({
  'show.uk.modal': function() {
    $('#modal1').show().addClass('uk-open')
  }
});*/