javascript - iframe 顶部的可拖动图像 [VUE]

Question

基本上我需要的是显示可以在 iframe 上自由移动的图像。我已经用一些 js 和 css 实现了这一点，但现在的问题是，当我滚动时，iframe 内容会相应移动，但图像仍保留在屏幕上的位置，我希望它与 iframe 一起移动内容有点像是它的一部分。

我曾尝试从 iframe 捕获滚动事件，但由于它是跨域的，我没有成功。

我也尝试获取它的整个高度，以使图像容器更高且可滚动，但这使得 iframe 不可滚动。

作为第三种选择，我也尝试将图像附加到 iframe，但同样，它是跨域的，所以即使我不确定 100%，我认为这是不可能的。

到目前为止，这是我的代码：

<template>
    <div class="general-container">
        <div class="general-container__iframe">
            <div class="iframe-container">
                <vue-friendly-iframe class="iframe-component" :src="iframeUrl"/>
            </div>
        </div>
        <div class="general-container__banner">
            <img :src="imageUrl" ref="draggable" class="draggable" @mousedown="dragMouseDown">
        </div>
    </div>
</template>

<script>
export default {
    name: "BannerPreview",
    data() {
        return {
            positions: {
                clientX: undefined,
                clientY: undefined,
                movementX: 0,
                movementY: 0
            },
        }
    },
    methods: {
        dragMouseDown(event) {
            event.preventDefault();
            this.positions.clientX = event.clientX;
            this.positions.clientY = event.clientY;
            document.onmousemove = this.elementDrag;
            document.onmouseup = this.closeDragElement;
        },
        elementDrag(event) {
            event.preventDefault();
            this.positions.movementX = this.positions.clientX - event.clientX;
            this.positions.movementY = this.positions.clientY - event.clientY;
            this.positions.clientX = event.clientX;
            this.positions.clientY = event.clientY;

            this.$refs.draggable.style.top = (this.$refs.draggable.offsetTop - this.positions.movementY) + 'px';
            this.$refs.draggable.style.left = (this.$refs.draggable.offsetLeft - this.positions.movementX) + 'px';
        },
        closeDragElement() {
            document.onmouseup = null;
            document.onmousemove = null;
        },
    },
    props: {
        imageUrl: {
            type: String,
            required: false
        },
        iframeUrl: {
            type: String,
            required: false
        }
    }
}
</script>

这是相应的样式：

.iframe-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  .iframe-component {
    iframe {
      width: 100vw;
      height: 100vh;
    }
  }
}

.general-container {
  position: relative;

  &__iframe,
  &__banner {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  &__banner {
    z-index: 10;
  }
}

.draggable {
  cursor: move;
  position: absolute;
  user-select: none;
}

标签： javascripthtmlcssvue.jsiframe