javascript - Drag and drop in RaphaelJS -

i have following fiddle: http://jsfiddle.net/zugzq7vv/

what want able drag number 1 on left of input box center of square , make square change black , number white.

how can accomplished raphaeljs 2.1?

js code:

// creates canvas 320 × 200 @ 10, 50 var paper = raphael(document.getelementbyid("papercanvas"), 320, 200);  var circle = paper.rect(50, 40, 50, 50); // sets fill attribute of circle red (#f00) circle.attr("fill", "#f00");  // sets stroke attribute of circle white circle.attr("stroke", "#fff");  var t = paper.text(75, 65,""); //i want empty string text drag 

and simple html:

1<input id="teste" disabled></input> <div id="papercanvas"></div> 

i know interface drag , drop, can't seem able apply individual numbers.

you cannot make non-svg/raphael elements drag using raphael.js i.e. string "1" before input element. need have raphael-text element.

even though raphael supports ondragover function, not sufficient achieve requirement. like, can trigger, when element on over it, doesnt has api onout, can revert colors/state back.

so, explained in other so answer, need track coordinates , based on have take actions in ondragcomplete method.

here working fiddle of asked for. but, scales need add more logic it, handle.

var text = paper.text(10, 10, "1"); text.attr('cursor','pointer'); text.attr('font-size', '20px');  text.drag(ondragmove, ondragstart, ondragcomplete);  function ondragstart(){     this.ox = this.attr('x');     this.oy = this.attr('y');     }  function ondragmove(dx,dy){     this.attr({x: this.ox + dx, y: this.oy + dy }); }  function ondragcomplete(){     if((this.attr('x') > 20 && (this.attr('x') < 70)) && (this.attr('y') < 50)) {         this.attr('fill', 'white');         rect.attr('fill', 'black');     } else {         this.attr('fill', 'black');         rect.attr('fill', 'red');     } };