SO Javascript drag/drop - Illustrator style 'smart guides'

Answer to http://stackoverflow.com/questions/20075009/javascript-drag-drop-illustrator-style-smart-guides

HTML

<div class='parent'>
    <div class='object'></div>
    <div class='other-object' style="top: 60px; left: 300px;"></div>
    <div class='other-object' style="top: 100px; left: 200px;"></div>
    <div class='other-object' style="top: 200px; left: 100px;"></div>
</div>

CSS

.parent {
    border: 1px solid black;
    width: 100%;
    height: 300px;
}
.object {
    position: absolute;
    background-color: red;
    width: 50px;
    height: 50px;
}
.other-object {
    position: absolute;
    background-color: blue;
    width: 80px;
    height: 80px;
}
.line {
    position: absolute;
}
.line.vertical {
    width: 0px;
    height: 100%;
    border-left: 1px dotted black;
}
.line.horizontal {
    width: 100%;
    height: 0px;
    border-top: 1px dotted black;
}

JavaScript

$('.other-object').draggable({
    containment: '.parent'
});

$('.object').draggable({
    containment: '.parent',
    snap: '.other-object',
    snapTolerance: 5,
    drag: function (event, ui) {

        // You'll want to debounce this function so that it doesn't run every mouse move (e.g. see Ben Alman's site @ http://tinyurl.com/37dyjug)
        var debounceTime = 200; // milliseconds
        setTimeout(function () {

            // Loop through all 'other-object's and see if we're lined up
            $(".other-object").each(function (idx, other) {
                
                var $other = $(other);

                // Determine whether we're "close enough" to display the line
                var padding = 1;
                var closeToLeft = Math.abs($other.offset().left - ui.offset.left) < padding;
                var closeToTop = Math.abs($other.offset().top - ui.offset.top) < padding;
                // You can add closeToRight/closeToBottom, but you may need to do some calculation, e.g. right = left + width

                // If we're close, display a line, otherwise remove that same line
                // TODO: Find a better way of tagging which 'other-object' this line belongs to, using IDs or something more stable than the index of the jQuery each() function!
                var id = 'leftOther' + idx;
                if (closeToLeft) {
                    console.debug(idx, 'left');
                    $('.parent').not(':has(#' + id + ')').append('<div id="' + id + '" class="line vertical" style="left: ' + $other.offset().left + 'px;"/>');
                } else {
                    $('#' + id).remove();
                }

                id = 'topOther' + idx;
                if (closeToTop) {
                    console.debug(idx, 'top');
                    $('.parent').not(':has(#' + id + ')').append('<div id="topOther' + idx + '" class="line horizontal" style="top: ' + $other.offset().top + 'px;"/>');
                } else {
          ...