how to make vuetify dialog draggable-CodePudding

I need to make a draggable dialog. But I'm using Vue2 & Vuetify.

I tried using jquery but doesn't work.

index.html

<head>
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
  <script>
    $(function () {
      $(".my-custom-dialog").draggable();
    });
  </script>
</head>

App.vue

<v-dialog v-model="isOpen" content->
  <!-- dialog content-->
</v-dialog>

I thought using content-class to give my dialog class name and using jquery as above would work. But it doesn't. Any Ideas?

CodePudding user response：

You can use vue-dialogue-drag, it is a pretty small package, and I usually recommend avoiding those (read about it at the end of the comment). It's relatively easy to use, and you can follow the instruction in its GitHub readme.

if you would like to implement a solution written by you, you can use this as a template:

(function () { // make vuetify dialogs movable
    const d = {};
    document.addEventListener("mousedown", e => {
        const closestDialog = e.target.closest(".v-dialog.v-dialog--active");
        if (e.button === 0 && closestDialog != null && e.target.classList.contains("v-card__title")) { // 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;
        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
        const dialog = document.querySelector(".v-dialog.v-dialog--active");
        if (dialog === null) return;
        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);
})();

According to deps.dev vue-dialogue-drag has a 4.8/10 safety rate though there are no dangerous workflows within it, I believe that the reason for the low score is lack of updates :)