如何在較小的 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>