もう少し汎用化してみる

JAVASCRIPT

http://storehouse.sakura.ne.jp/drag.html
こんな感じで。

<html>
  <head>
    <script type="text/javascript">
function add_event(element, type, handler, flag) {
  function handler_wrapper(e) {
    e = e || event;
    return handler(e);
  }

  if (element.addEventListener) {
    element.addEventListener(type, handler_wrapper, flag);
  } else if (element.attachEvent) {
    element.attachEvent("on" + type, handler_wrapper);
  }
}

var enable_drag = (function() {
  var z_index = 0;

  return function(id, top, left) {
    var element = document.getElementById(id);
    var dragger = null;
    element.style.position = 'absolute';
    element.style.top = top + 'px';
    element.style.left = left + 'px';
    element.style.zIndex = z_index++;

    add_event(element, 'mousedown', function(e) {
      var start_x = e.clientX;
      var start_y = e.clientY;
      element.style.zIndex = z_index++;

      dragger = function(mousemove) {
        var offset_x = mousemove.clientX - start_x;
        var offset_y = mousemove.clientY - start_y;
        element.style.top = (top + offset_y) + 'px';
        element.style.left = (left + offset_x) + 'px';
      };
    });

    add_event(element, 'mousemove', function(e) {
      if (dragger) {
        dragger(e);
      }
    });

    add_event(element, 'mouseup', function(e) {
      if (dragger) {
        top = parseInt(element.style.top);
        left = parseInt(element.style.left);
        dragger = null;
      }
    });
  }
})();
    </script>
  </head>
  <body>
    <!-- foo -->
    <div id="foo" style="width:100px; height:100px; background-color:red;">
      foo
    </div>
    <script type="text/javascript">
      enable_drag('foo', 100, 100);
    </script>

    <!-- bar -->
    <div id="bar" style="width:100px; height:100px; background-color:blue;">
      bar
    </div>
    <script type="text/javascript">
      enable_drag('bar', 200, 200);
    </script>

    <!-- zoo -->
    <div id="zoo" style="width:100px; height:100px; background-color:yellow;">
      zoo
    </div>
    <script type="text/javascript">
      enable_drag('zoo', 300, 300);
    </script>
  </body>
</html>

いまいち動きがぎこちない…