If I understand your question correctly, it sounds like you could solve the problem in the following way.
Upon interacting with the ruler, you will be able to calculate the new width, x- and y-coordinates. This is pretty straight forward and requires only a few lines of jQuery code in the callback after any form of interaction with your ruler.
You could then check for each item in your (gant?) chart to see whether it occupies any of the same area that the ruler does. This would be relative to the parent container.
The devil is in the detail for how you would like to handle whether the ruler is 'in' the Gant chart div item. And below is some code to get your started on working out whether the Ruler occupies the some of the same location as the other divs:
function checkOverlays (x, width, y, height) {
$(".aaaa").each (function (i,e) {
var thisWidth = $(this).width();
var thisHeight = $(this).height();
var offsetTop = $(this).offset().top - $(this).parent().offset().top;
var offsetLeft = $(this).offset().left - $(this).parent().offset().left;
console.log('x coverage: ' + offsetLeft + " to " + parseFloat(thisWidth + offsetLeft));
console.log('y coverage: ' + offsetTop + " to " + parseFloat(thisHeight + offsetTop));
if (offsetLeft > x && offsetLeft < parseFloat(x + width) ) {
console.log("I'm in the same x space");
$(this).css('background-color', 'red');
}
if (offsetTop > y && offsetTop < parseFloat(y + height) ) {
console.log("I'm in the same y space");
$(this).css('background-color', 'red');
}
})
}
$("#draggable2").on("resize drag", function () {
var thisWidth = $(this).width();
var thisHeight = $(this).height();
var offsetTop = $(this).offset().top - $(this).parent().offset().top;
var offsetLeft = $(this).offset().left - $(this).parent().offset().left;
console.log('x coverage: ' + offsetLeft + " to " + parseFloat(thisWidth + offsetLeft));
console.log('y coverage: ' + offsetTop + " to " + parseFloat(thisHeight + offsetTop));
checkOverlays (offsetLeft, thisWidth, offsetTop, thisHeight)
});