最近準(zhǔn)備學(xué)學(xué)Javascript和Raphaël，實(shí)現(xiàn)一個(gè)可拖動(dòng)的矩形，另外矩形上還得顯示標(biāo)簽。查了一下網(wǎng)上這個(gè)東西還比較冷門。Javascript才學(xué)沒幾天，代碼估計(jì)寫的很爛。
代碼如下:
<!doctype html>
<html charset="utf-8">
<head>
<title>Raphaël - Connectivities</title>
<script src="raphael-min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function Entity(r, l, t, w, h){
this.Label = r.text(l + w/2, t + h/2, "Hello World!");
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();
function Dragger(){
this.xx = this.attr("x");
this.yy = this.attr("y");
this.animate({"fill-opacity": .2}, 500);
}
function move(dx, dy){
var attr = {x: this.xx + dx, y: this.yy + dy};
this.attr(attr);
var lb = this.data("cooperative");
var attr1 = {x: this.xx + dx + this.attr("width") / 2, y: this.yy + dy + this.attr("height") / 2};
lb.attr(attr1);
}
function up(){
this.animate({"fill-opacity": 1}, 300);
}
}
window.onload = function(){
var r = Raphael("holder", 620, 420),discattr={fill:"red", stroke:"none"};
var entity1 = new Entity(r, 0, 0, 60, 40);
};
</script>
</head>
<body>
<div id="holder">
</div>
</body>
</html>
實(shí)現(xiàn)方法就是將Text作為Rectangle自定義屬性，才能控制當(dāng)拖動(dòng)的時(shí)候，隨著Rectangle一起移動(dòng)。
