如何使 vuetify 对话框可拖动

Question

我需要制作一个可拖动的对话框。但我正在使用 Vue2 和 Vuetify。

我尝试使用 jquery 但没有用。

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-class="my-custom-dialog">
  <!-- dialog content-->
</v-dialog>

我认为使用 content-class 为我的对话框命名 class 并使用 jquery 如上所述会起作用。但事实并非如此。有什么想法吗？

Answer 1

你可以使用 vue-dialogue-drag，它是一个非常小的包，我通常建议避免使用它们（在评论末尾阅读）。它相对容易使用，您可以按照其 GitHub 自述文件中的说明进行操作。

如果您想实施您编写的解决方案，可以将其用作模板：

(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);
})();

根据 deps.dev vue-dialogue-drag 有 4.8/10 的安全率，尽管其中没有危险的工作流程，我认为得分低的原因是缺乏更新:)

如何使 vuetify 对话框可拖动

how to make vuetify dialog draggable

vue.js

jquery-ui

vuetify.js