;(function() {
  // make vuetify dialogs (x5 modals) movable
  const d = {}
  document.addEventListener('mousedown', e => {
    const closestDialog = e.target.closest('.x5-m-modal')
    const closestHeader = e.target.closest('.x5-m-header')
    if (e.button === 0 && closestHeader != null) {
      // element which can be used to move element
      d.el = closestDialog // element which should be moved
      d.mouseStartX = e.clientX
      d.mouseStartY = e.clientY
      d.elStartX = d.el.getBoundingClientRect().left
      d.elStartY = d.el.getBoundingClientRect().top
      d.el.style.position = 'fixed'
      d.el.style.margin = 0
      d.oldTransition = d.el.style.transition
      d.el.style.transition = 'none'
    }
  })
  document.addEventListener('mousemove', e => {
    if (d.el === undefined) return
    //david added the following line which allows the otherwise 'centered' modal to be moved precisely
    d.el.style.transform = 'none'

    d.el.style.left = Math.min(Math.max(d.elStartX + e.clientX - d.mouseStartX, 0), window.innerWidth - d.el.getBoundingClientRect().width) + 'px'
    d.el.style.top = Math.min(Math.max(d.elStartY + e.clientY - d.mouseStartY, 0), window.innerHeight - d.el.getBoundingClientRect().height) + 'px'
  })
  document.addEventListener('mouseup', () => {
    if (d.el === undefined) return
    d.el.style.transition = d.oldTransition
    d.el = undefined
  })
  setInterval(() => {
    // prevent out of bounds
    //example:  user drags modal to bottom of screen. User then inputs data into a text field on form within the modal
    //that results in the modal 'growing' downwards. Without this code, the bottom of the modal would extend out of
    //bounds; with this code the top of the modal is re-set so that the entire modal is showing.
    const dialog = document.querySelector('.x5-m-modal')
    if (dialog === null) return
    //this first line is probably not needed since users cannot cause modals to 'grow' wider, though, there could be
    //edge cases where the developer allows users to toggle to a wider view, thus possibly overflowing to the left or right
    dialog.style.left = Math.min(parseInt(dialog.style.left), window.innerWidth - dialog.getBoundingClientRect().width) + 'px'
    dialog.style.top = Math.min(parseInt(dialog.style.top), window.innerHeight - dialog.getBoundingClientRect().height) + 'px'
  }, 100)
})()

<style>
.x5-m-header {
  cursor: grab;
}

.x5-m-header--active {
  cursor: grabbing;
}
</style>