javascript - How to create a set of two elements: Raphael -

i have 2 rectangles on canvas, want them snap if drag 1 of them ontop of other. guess need use set() not sure how. got far.

$(document).ready(function(){     var paper = raphael(20, 20, 5000, 5000);  var rect1 = paper.rect(50, 50, 50, 50).attr({     fill: "hsb(.8, 1, 1)",     stroke: "none",     opacity: .5, });  var rect2 = paper.rect(50, 50, 50, 50).attr({     fill: "hsb(.8, 1, 1)",     stroke: "none",     opacity: .5, });  var rectstart = function() {         this.ox = this.attr("x");         this.oy = this.attr("y");         this.attr({opacity: 1});     },     rectmove = function(dx, dy) {         this.attr({x: this.ox + dx, y: this.oy + dy});     },     rectup = function(){         this.attr({opacity: .5});     };   rect1.drag(rectmove, rectstart, rectup); rect2.drag(rectmove, rectstart, rectup); 

you have write logic inside rectup method.

here working fiddle

var paper = raphael(20, 20, 5000, 5000);  var rect1 = paper.rect(50, 50, 50, 50).attr({     fill: "hsb(.8, 1, 1)",     stroke: "none" }); rect1.track_x = 50; rect1.track_y = 50;  var rect2 = paper.rect(150, 50, 50, 50).attr({     fill: "#aa9988",     stroke: "none" }); rect2.track_x = 150; rect2.track_y = 50;  function rectstart() { }  function rectmove(dx, dy) {     this.attr({x: this.track_x + dx, y: this.track_y + dy}); }  function rectup() {      this.track_x = this.attr("x");     this.track_y = this.attr("y");     var currentdragrect, idlerect;     if(this == rect1) {         currentdragrect = rect1;         idlerect = rect2;     } else {         currentdragrect = rect2;         idlerect = rect1;     }     /*     r11   r12     currentdragrect     r21   r22     idlerect     */     //r11 <= r22 && r21 <= r12     //50 width , height     if( (currentdragrect.track_x <= (idlerect.track_x + 50)) &&         (idlerect.track_x <= (currentdragrect.track_x + 50)) ) {          if( (currentdragrect.track_y <= (idlerect.track_y + 50)) &&             (idlerect.track_y <= (currentdragrect.track_y + 50)) ) {              //p.translate(300, 100);             alert('done  ' + idlerect.track_x);             currentdragrect.attr({x: idlerect.track_x, y: idlerect.track_y});             //currentdragrect.transform('t' + idlerect.track_x + ','+ idlerect.track_y);          }      } }  rect1.drag(rectmove, rectstart, rectup); rect2.drag(rectmove, rectstart, rectup); 

i tried using element.ondragover didnt work expected. said in so answer tracking co-ordinates helps solve kind of problem.