Google drawing Red rule using jquery - php

Question

I am working on custom form builder for one of my clients where we have functionality like drag fields , resize, apply css like borders and align fields using jquery. i am done with dragging,resizing and css but one of the major requirement is to apply "google drawing red rule " as we have in google drawing.
i have attached a screencast video as well as screencast images to clarify what red rule is.
http://screencast.com/t/ow6s5zKt9P
http://screencast.com/t/e1SL26gFJT8v
http://screencast.com/t/QAJGB7PzEwB
http://screencast.com/t/OoM6BqAH
Video:
http://screencast.com/t/ORaqAVWX4XGu
As can be seen in the above screen casts when ever we drag/draw a field and overlap with other fields it highlights the vertical and horizontal center of the dragging field or the overlap field in Red color (hence the title red rule). it also highlights the borders of any field overlapping the other field or moving out of the canvas area. it also shows whether field can be inscribed inside in another field while dragging.
I am looking at some one who can guide me in correct direction to acchive this functionality. i need to apply this red rule effect other than drawing or any thing. please sugguest any possibilities.
Any help is greatly appreciated.

Answer 1

i got the solutuon.
you can check her 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;
}