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

Question

我目前正在rulerguides.js工作。我为标尺和网格线定制了特定的div。请参阅FIDDLE。统治者对我来说工作得很好但是拖拽山墙只创建了从body元素计算的div（ GRID LINES ），这意味着窗口的顶部和窗口的左边缘。在我的代码中我可以发送特定的div标尺

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

我需要从特定的div开始  （例如：标尺h unselectable 类将创建水平网格线，标尺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。