<template><div class="container" id="container"><div class="drag-box center" v-drag v-if="isShowDrag"><div>無法拖拽出容器的div浮窗</div></div></div>
</template><script>
export default {data() {return {isShowDrag: true,};},//自定義指令directives: {drag: {// 指令的定義bind: function (drag_dom) {drag_dom.onmousedown = (e) => {// 按下鼠標時，鼠標相對于被拖拽元素的坐標let disX = e.clientX - drag_dom.offsetLeft;let disY = e.clientY - drag_dom.offsetTop;// 獲取容器domlet container_dom = document.getElementById("container");document.onmousemove = (e) => {// 用鼠標的位置減去鼠標相對元素的位置，得到元素的位置let left = e.clientX - disX;let top = e.clientY - disY;// 在容器范圍內移動時，被拖拽元素的最大left值let leftMax =container_dom.offsetLeft +(container_dom.clientWidth - drag_dom.clientWidth);// 在容器范圍內移動時，被拖拽元素的最小left值let leftMin = container_dom.offsetLeft + 1; //此處+1為容器的邊框1pxif (left > leftMax) {drag_dom.style.left = leftMax + "px";} else if (left < leftMin) {drag_dom.style.left = leftMin + "px";} else {drag_dom.style.left = left + "px";}// 在容器范圍內移動時，被拖拽元素的最大left值let topMax =container_dom.offsetTop +(container_dom.clientHeight - drag_dom.clientHeight);// 在容器范圍內移動時，被拖拽元素的最小left值let topMin = container_dom.offsetTop + 1; //此處+1為容器的邊框1pxif (top > topMax) {drag_dom.style.top = topMax + "px";} else if (top < topMin) {drag_dom.style.top = leftMin + "px";} else {drag_dom.style.top = top + "px";}};document.onmouseup = () => {document.onmousemove = null;document.onmouseup = null;};};},},},
};
</script><style lang="scss" scoped>
.drag-box {position: absolute;top: 100px;left: 100px;width: 300px;height: 100px;background: #fff;border-radius: 5px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);padding: 10px;// 改變鼠標樣式為移動圖標cursor: move;// 禁止文字被選中user-select: none;
}.container {border: 1px solid red;width: 600px;height: 300px;margin: 30px;
}.center {display: flex;justify-content: center;align-items: center;
}
</style>