Question

我正在为我的一个客户开发自定义表单构建器，我们在其中具有拖动字段，调整大小，应用css（如边框）和使用jquery对齐字段等功能。我完成了拖动，调整大小和CSS，但主要要求之一是应用谷歌绘图中的“谷歌绘图红色规则”。

我附上了截屏视频和截屏图片，以阐明红色规则是什么。

http://screencast.com/t/ow6s5zKt9P

http://screencast.com/t/e1SL26gFJT8v

http://screencast.com/t/QAJGB7PzEwB

http://screencast.com/t/OoM6BqAH

视频：

http://screencast.com/t/ORaqAVWX4XGu

从上面的屏幕投射可以看出，当我们拖动/绘制一个字段并与其他字段重叠时，它会突出显示拖动字段的垂直和水平中心或红色颜色的重叠字段（因此标题为红色规则）。它还会突出显示与其他字段重叠或移出画布区域的任何字段的边框。它还显示在拖动时是否可以在另一个字段内刻入字段。

我正在寻找能够指导我正确指导我的人。我需要应用除绘图或任何东西之外的红色规则效果。请提出任何可能性。

非常感谢任何帮助。

Answer 1

我得到了解决方案。你可以检查她http://jsfiddle.net/elin/A6CpP/

<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>

  $.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) {
            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
        });

    #parent{
    width:600px;
    height:500px;
    border:1px solid #000;
    position:relative;
}
.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: 2px solid red;
}
.objecty{
    display:none;
    //background:#fff;
    width:100%;
    height:0px;
    position:absolute;
    top:10px;
    left:0px;
    border-bottom: 2px solid red;
}

谷歌使用jquery绘制红色规则

1 个答案: