こいつ、動くぞ！

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
          });
      }
    });
  });
});