如何在rulerguides.js中查找確切的可拖動網格線位置？

我目前在rulerguides.js工作。而且我爲標尺和網格線定製了特定的div。請參閱FIDDLE。統治者爲我工作不錯，但拖山牆創建唯一的主體元素，這意味着window.Here窗口的頂部和左側邊緣在我的代碼計算DIV（網格線）我可以給特定的div統治者如何在rulerguides.js中查找確切的可拖動網格線位置？

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

我需要開始從特定的div （例如：統治者^ h不可選擇類將創建水平網格線和統治者v不可選擇類將建立在我的工作區垂直網格線。）如何獲得可拖動的起點元素？而且我需要以特別的格子開始，就像圖片 Demo Image 。

我掙扎了2天以上。如何解決這個問題？

來源

2014-12-26 VIVEK-MDU

實際上RulersGuides.js不打算在文檔主體以外的容器中使用，所以我會考慮將它放在iframe中。如果你真的需要它在一個div，這裏是需要做一些調整：

更新getWindowSize，getScrollPos和getScrollSize函數來計算容器的尺寸。

而是在鼠標按下處理程序使用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) {

相應

更新removeInboundGuide以相同的方式。

除此之外，我認爲將來會需要在DOM尺寸計算的一些變化，對話等

請參考以下jsfiddle的細節。

來源

2014-12-26 12:19:03

HI @Mark Rolich ..謝謝你寶貴的答案。我真的很高興你的答案。同時，我會改變像素在我的小提琴英寸..你看到它嗎？實施英寸是否是正確的方式？或者其他任何想法？ –

嗨Vivek。實際上，我認爲將真實世界的測量單位（如英寸）映射到在不同設備和屏幕尺寸上可能不同的像素上非常困難。有關於[github]的討論（https://github.com/mark-rolich/RulersGuides.js/issues/14#issuecomment-62690014） –

@MarkRolich很好的答案，+100 –

如何在rulerguides.js中查找確切的可拖動網格線位置？

回答

相關問題