Lately, I've been exploring the idea of incorporating 'smart guides' into one of my JQuery Draggable projects. This project involves a variable zoom level, and I've made adjustments in my code to accommodate it. However, I'm encountering difficulties getting this code to work smoothly with my smart guide code.

Everything functions as intended when using zoom:1, but when I set it to zoom:0.7, for instance, the divs start jittering around during drag and the guides sometimes fail to display.

I would greatly appreciate any assistance!

All code was originally sourced from Stack Overflow

JSFiddle Link: http://jsfiddle.net/adminb/zZ22h/

HTML

<div id="parent">
    <div class="other-objects" style="left:0px;top:300px;background:#a00;"></div>
    <div class="other-objects"></div>
    <div class="other-objects" style="left:400px;top:20px;"></div>
    <div class="objectx"></div>
    <div class="objecty"></div>
</div>

CSS

#parent {
    width:400px;
    height:400px;
    border:1px solid #000;
    position:absolute;
    zoom:0.8;
}
.other-objects {
    background:#aaa;
    width:100px;
    height:100px;
    display:block;
    position:relative;
    left:140px;
    top:50px;
}
.objectx {
    display:none;
    //background:#fff;
    width:0px;
    height:100%;
    position:absolute;
    top:0px;
    left:10px;
    border-left: 1px solid yellow;
}
.objecty {
    display:none;
    //background:#fff;
    width:100%;
    height:0px;
    position:absolute;
    top:10px;
    left:0px;
    border-bottom: 1px solid yellow;
}

JQuery / JavaScript

$.ui.plugin.add("draggable", "smartguides", {
    start: function (event, ui) {
        var i = $(this).data("draggable"),
            o = i.options;
        i.elements = [];
        $(o.smartguides.constructor != String ? (o.smartguides.items || ':data(draggable)') : o.smartguides).each(function () {
            var $t = $(this);
            var $o = $t.offset();
            if (this != i.element[0]) i.elements.push({
                item: this,
                width: $t.outerWidth(),
                height: $t.outerHeight(),
                top: $o.top,
                left: $o.left
            });
        });
    },
    stop: function (event, ui) {
        $(".objectx").css({
            "display": "none"
        });
        $(".objecty").css({
            "display": "none"
        });
    },
    drag: function (event, ui) {
        ui.position.top = Math.round(ui.position.top / zoom); //Compensate for zoom
        ui.position.left = Math.round(ui.position.left / zoom); //Compensate for zoom
        var inst = $(this).data("draggable"),
            o = inst.options;
        var d = o.tolerance;
        $(".objectx").css({
            "display": "none"
        });
        $(".objecty").css({
            "display": "none"
        });
        var x1 = ui.offset.left,
            x2 = x1 + inst.helperProportions.width,
            y1 = ui.offset.top,
            y2 = y1 + inst.helperProportions.height,
            xc = (x1 + x2) / 2,
            yc = (y1 + y2) / 2;
        for (var i = inst.elements.length - 1; i >= 0; i--) {
            var l = inst.elements[i].left,
                r = l + inst.elements[i].width,
                t = inst.elements[i].top,
                b = t + inst.elements[i].height,
                hc = (l + r) / 2,
                vc = (t + b) / 2;
            var ls = Math.abs(l - x2) <= d;
            var rs = Math.abs(r - x1) <= d;
            var ts = Math.abs(t - y2) <= d;
            var bs = Math.abs(b - y1) <= d;
            var hs = Math.abs(hc - xc) <= d;
            var vs = Math.abs(vc - yc) <= d;
            if (ls) {
                ui.position.left = inst._convertPositionTo("relative", {
                    top: 0,
                    left: l - inst.helperProportions.width
                }).left - inst.margins.left;
                $(".objectx").css({
                    "left": l - d - 4,
                        "display": "block"
                });
            }
            if (rs) {
                ui.position.left = inst._convertPositionTo("relative", {
                    top: 0,
                    left: r
                }).left - inst.margins.left;
                $(".objectx").css({
                    "left": r - d - 4,
                        "display": "block"
                });
            }

            if (ts) {
                ui.position.top = inst._convertPositionTo("relative", {
                    top: t - inst.helperProportions.height,
                    left: 0
                }).top - inst.margins.top;
                $(".objecty").css({
                    "top": t - d - 4,
                        "display": "block"
                });
            }
            if (bs) {
                ui.position.top = inst._convertPositionTo("relative", {
                    top: b,
                    left: 0
                }).top - inst.margins.top;
                $(".objecty").css({
                    "top": b - d - 4,
                        "display": "block"
                });
            }
            if (hs) {
                ui.position.left = inst._convertPositionTo("relative", {
                    top: 0,
                    left: hc - inst.helperProportions.width / 2
                }).left - inst.margins.left;
                $(".objectx").css({
                    "left": hc - d - 4,
                        "display": "block"
                });
            }
            if (vs) {
                ui.position.top = inst._convertPositionTo("relative", {
                    top: vc - inst.helperProportions.height / 2,
                    left: 0
                }).top - inst.margins.top;
                $(".objecty").css({
                    "top": vc - d - 4,
                        "display": "block"
                });
            }
        };
    }
});
$('.other-objects').draggable({
    containment: 'parent',
    smartguides: ".other-objects",
    tolerance: 5
});
var zoom = $('#parent').css('zoom');