javascript - 如何在 rulerguides.js 中找到精确的可拖动网格线位置？

Question

我目前在 rulerguides.js 工作.我为标尺和网格线定制了特定的 div。引用这个 FIDDLE .标尺对我来说工作正常，但拖动山墙创建 div (GRID LINES) 仅从 body 元素计算，这意味着窗口的顶部和窗口的左边缘。在我的代码中，我可以发送特定的 div统治者

var evt         = new Event(),
    dragdrop    = new Dragdrop(evt),
    rg          = new RulersGuides(evt, dragdrop,document.getElementById('workarea'));

我需要从特定的 div 开始 (例如:ruler h unselectable 类将在我的工作区创建水平网格线，ruler v unselectable 类将创建垂直网格线。)如何获得可拖动的起始元素？我需要特别开始 div 就像图像一样 .

我挣扎了 2 天多。如何解决这个问题？

Answer 1

实际上，RulersGuides.js 不打算用在文档主体以外的容器中，所以我会考虑将它放在 iframe 中。如果您确实需要将其放在 div 中，则需要进行一些调整:

1. 更新 getWindowSize、getScrollPos 和 getScrollSize 函数以计算容器尺寸。

2. 而不是在 mousedown 处理程序中使用 vBound 和 hBound，您需要引入 vLowBound、vHighBound 等，其中将考虑容器的左侧和顶部偏移，如下所示:

   if (vLowBound === 0) {
       vLowBound = container.offsetLeft;
       vHighBound = vRuler.offsetWidth + vLowBound;
       hLowBound = container.offsetTop;
       hHighBound = hRuler.offsetHeight + hLowBound;
   }
   

有适当的检查

if (
    (
        (x > vLowBound && x < vHighBound) ||
        (y > hLowBound && y < hHighBound)
    ) && rulerStatus === 1
)

然后

if (y > hLowBound && y < hHighBound) {

和

} else if (x > vLowBound && x < vHighBound) {

因此

1. 以同样的方式相应地更新 removeInboundGuide。

除此之外，我认为在 dom 维度计算、对话框等方面需要进行一些更改。

请引用以下jsfiddle了解详情。