如何使vuetify对话框可拖放
如何使vuetify对话框可拖放
提问于 2022-02-18 05:28:16
我需要做一个冗长的对话。但我使用的是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来给我的对话框类名和使用上面所述的jquery是可行的。但没有。有什么想法吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-02-18 11:48:39
您可以使用vue-对话-拖动，它是一个非常小的包，我通常建议您避免使用这些包(请在评论的末尾阅读)。它相对容易使用，您可以按照其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的安全率，虽然里面没有危险的工作流程，但我认为低分数的原因是缺乏更新:)
Stack Overflow用户
发布于 2022-11-25 00:35:43
要使Vuetify 3.+对话框具有可移动性，您可以使用tipsy at https://github.com/vuetifyjs/vuetify/issues/4058 (与已接受的答案相同)早先建议的解决方案，但将其定制为Vue component movable.vue，您可以将其导入App.vue。
<script>
/* add class .vss-movable to <v-card-title> to make a dialog movable */
(function () {
const d = {}
const isMovable = (targ) => {
return targ.classList?.contains("vss-movable")
}
document.addEventListener("mousedown", e => {
const closestDialog = e.target.closest(".v-overlay__content")
const title = closestDialog?.querySelector(".v-card-title")
if ( e.button === 0 && closestDialog != null && (isMovable(e.target)) || isMovable(e.target.parentNode) ) {
d.el = closestDialog // movable element
d.handle = title // enable dlg to be moved down beyond bottom
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.handle.getBoundingClientRect().height
) + "px"
})
document.addEventListener("mouseup", () => {
if (d.el === undefined) return
d.el.style.transition = d.oldTransition
d.el = undefined
})
})()
</script>
<style>
.v-overlay.v-dialog .vss-movable {
cursor: grab;
}
.v-overlay.v-dialog .vss-movable:hover {
background-color: #eee;
}
.v-overlay.v-dialog .vss-movable:active {
cursor: grabbing;
}
</style>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71168747
复制相关文章
相似问题
腾讯云开发者
