How to find exact draggable grid line position in rulerguides.js?

Question

I am currently working in rulerguides.js. And i customized into particular div for rulers and grid line.REFER THIS FIDDLE. Rulers are working fine for me but drag-gable create div (GRID LINES) calculated from body element only , that means top of window and left edges of window.Here In my code i can send particular div for rulers

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

I need to start from particular div (For example : ruler h unselectable class will create horizontal grid line and ruler v unselectable class will create vertical grid line in my working area.) How to get draggable starting element ? And i need to start in particular div just like image .

I am struggle for more than 2 days.How to solve this issues?

Answer 1

Actually RulersGuides.js is not intended to be used in containers other than document body, so I would think about placing it in an iframe. If you really need to have it a in a div, here are some adjustments needed:

1. Update getWindowSize, getScrollPos and getScrollSize functions to calculate container dimensions.

2. Instead of using vBound and hBound in mousedown handler you need to introduce vLowBound, vHighBound, etc., where container's left and top offsets will be taken in account, like this:

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

with appropriate checks

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

and then

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

and

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

accordingly

3. Update removeInboundGuide accordingly in the same way.

Other than that, I think there'll be needed some changes in dom dimensions calculations, dialogs etc.

Please refer to the following jsfiddle for the details.