我需要制作一个可拖动的对话框。但我正在使用 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>
应用程序.vue
<v-dialog v-model="isOpen" content-class="my-custom-dialog">
<!-- dialog content-->
</v-dialog>
我认为使用 content-class 来给出我的对话框类名称并使用上面的 jquery 是可行的。但事实并非如此。有什么想法吗？
最佳答案
您可以使用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，虽然里面没有危险的工作流程，我相信低分的原因是缺乏更新:)
关于vue.js - 如何使 vuetify 对话框可拖动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71168747/