Question

我最近一直在寻找添加＆＃39;智能指南＆＃39;到我的一个JQuery Draggable项目。该项目使用可变缩放级别，我已在我的代码中进行了补偿。但是我无法使这段代码和我的智能指南代码协同工作。

当我使用缩放：1它可以工作，但是使用缩放：0.7，例如，当拖动时div会开始反弹，并且指南有时会拒绝显示。

任何帮助将不胜感激！

所有代码都源自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');

Answer 1

css属性zoom不是标准的，似乎有各种问题，取决于浏览器，不适用于firefox或opera。

为什么不使用css3变换比例法呢？（不要忘记删除缩放并调整缩放后的#parent余量）

-ms-transform: scale(0.7,0.7); /* IE 9 */
-webkit-transform: scale(0.7,0.7); /* Chrome, Safari, Opera */
transform: scale(0.7,0.7);

带css zoom的JQuery / Javascript智能指南

1 个答案: