我需要制作一個可拖動的對話框。但我正在使用 Vue2 和 Vuetify。
我嘗試使用 jquery 但不起作用。
索引.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 會起作用。但事實并非如此。有任何想法嗎？
uj5u.com熱心網友回復：
你可以使用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，雖然其中沒有危險的作業流程，但我認為得分低的原因是缺乏更新 :)
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/430891.html