如何在较小的 div 中获取可拖动元素的 position 并将其转换为大 div

Question

我基本上创建的是一个 electron 程序，它循环包含广告的视频。 该视频跨越了整个 window。

我有第二个较小的 window 用于实时配置有关视频 window 的内容，其中之一是能够添加覆盖在视频上的消息。 这是一张图片向您展示我的意思： https://i.imgur.com/9SneVOT.png

可以拖动前景中较小视频上的蓝色矩形，表示将在视频上显示的消息。 如果我保存该矩形的坐标并在背景的主视频上创建一个元素，由于 windows 的大小不同，坐标不匹配，那么我如何获取这些坐标并使它们适用于更大的 window ?

Answer 1

较小 div 中的每个像素等于较大 div 中的 X 个像素。 这就是乘以的比率。 让我们假设鼠标在较小的 div 内移动就像拖动和影响较大的 div。

 var small = document.querySelector(".small"); var big = document.querySelector(".big"); var rectangle = document.querySelector(".rectangle"); var ratioX = big.clientWidth / small.clientWidth var ratioY = big.clientHeight / small.clientHeight small.addEventListener("mousemove", function(ev) { var mx = ev.offsetX var my = ev.offsetY rectangle.style.left = mx * ratioX + "px" rectangle.style.top = my * ratioY + "px" })

 .small { width: 100px; height: 50px; border: 1px solid black; }.big { width: 300px; height: 150px; border: 1px solid black; position: relative; overflow: hidden; }.rectangle { width: 20px; height: 20px; background: blue; position: absolute; }

 Mouse over this: <div class="small"> </div> Will move this: <div class="big"> <div class="rectangle"> </div> </div>