こいつ、動くぞ!

jQueryの練習です。dataメソッドはハッシュマップ的な使い方ができて、すごく便利だってことがわかりました。

movebox.html

ソース
$(document).ready(function(){
$("#newMoveBox").click(function(){
$("#field").append('<p class="movebox"></p>');
$(".movebox").mousedown(function(e){
$(this)
.data("down",true)
.data("x",e.clientX)
.data("y",e.clientY)
.css({backgroundColor:"#999",borderColor:"#666"});
return false;
}).mouseup(function(e){
$(this)
.data("down",false)
.css({backgroundColor:"#aaa",borderColor:"#888"});
}).mouseout(function(e){
$(this)
.data("down",false)
.css({backgroundColor:"#aaa",borderColor:"#888"});
}).mousemove(function(e){
if($(this).data("down") == true){
$(this)
.data("x",e.clientX)
.data("y",e.clientY)
.css({
left:$(this).data("x") - $(this).width()/2,
top:$(this).data("y") - $(this).height()/2
});
}
});
});
});
タグ:javascript jquery
posted by 右京| Comment(0) | TrackBack(0) | 雑記
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

この記事へのトラックバックURL
http://blog.seesaa.jp/tb/131112574
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック