最近準備學Javascript和Raphaël,實作一個可拖曳的矩形,另外矩形上還得顯示標籤。查了一下網路上這個東西還比較冷門。 Javascript才學沒幾天,程式碼估計寫的很爛。 複製程式碼 程式碼如下: Raphaël - Connectivities <BR>function Entity(r, l, t, w, h){ <BR>this.Label = r.text(l w /2, t h/2, "Hello World!"); <BR>this.Rectangle = r.rect(l, t, w, h, 10).attr({fill:"brown", stroke:"#666 ", title:"A Rectangle"}).drag(move, Dragger, up).data("cooperative", this.Label).toBack(); <BR>function Dragger(){ <BR>this.xx = this.attr("x"); <BR>this.yy = this.attr("y"); <BR>this.animate({"fill-opacity": .2}, 500); <BR>} <BR>function move(dx, dy){ <BR>var attr = {x: this.xx dx, y: this.yy dy}; <BR>this.attr(attr); <BR>var lb = this .data("cooperative"); <BR>var attr1 = {x: this.xx dx this.attr("width") / 2, y: this.yy dy this.attr("height") / 2}; <BR>lb.attr(attr1); <BR>} <BR>function up(){ <BR>this.animate({"fill-opacity": 1}, 300); <BR>} <BR>} <BR>window.onload = function(){ <BR>var r = Raphael("holder", 620, 420),discattr={fill:"red", stroke:"none"}; <BR>var entity1 = new Entity(r, 0, 0, 60, 40); <BR>}; <BR> 實作方法就是將Text作為Rectangle自訂屬性,才能控制拖曳的時候,隨著Rectangle一起移動。