如何在 ruleguides.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 就像 image .

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

Answer 1

实际上 RulersGuides.js 不打算在文档正文以外的容器中使用，所以我会考虑将它放在 iframe 中。 如果你真的需要将它放在一个 div 中，这里需要进行一些调整：

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

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

   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。