東日本大震災　洋野町津波被災（震災後7日目）その２八木から南






















































久々にコードを書いてみた。さっぱりだ。

確かにページ全体の座標が必要というわけではないし、スクロールしてしまうと外れてしまう。
修正：マウスアウトでも外れるように変更。
http://www.tagindex.com/cgi-lib/q4bbs/patio.cgi?mode=view&no=2803

<!DOCTYPE html>
<title></title>
<style type="text/css">
div {
  width : 100px;
  height: 100px;
  background: pink;
  border : 3px #f88 double;
}
#p {
  height:5000px;
  width :600px;
  background: #ffc;
}
</style>

<body>
  <div id="drag0">drag0</div>
  <div id="drag1">drag1</div>
  <div id="p">abc</div>

<script>

(function () {
  function Drag (node) {/*@cc_on@*/
    this.node    = node;
    this.state   = 0;
    this.offsetX = 0;
    this.offsetY = 0;
  }
  
  var memory = [];

  function init (view) {
    if (1 > arguments.length)
      view = window;

    var doc = view.document;
    
    doc./*@if (1) attachEvent ('on' + @else@*/ addEventListener (/*@end@*/'mousedown', onMouseEvent, false);
    doc./*@if (1) attachEvent ('on' + @else@*/ addEventListener (/*@end@*/'mouseup', onMouseEvent, false);
    doc./*@if (1) attachEvent ('on' + @else@*/ addEventListener (/*@end@*/'mousemove', onMouseEvent, false);
    doc./*@if (1) attachEvent ('on' + @else@*/ addEventListener (/*@end@*/'mouseout', onMouseEvent, false);
    view./*@if (1) attachEvent ('on' + @else@*/ addEventListener (/*@end@*/'unload', onUnload, false);

    function getMousePosition (event/*EventObject*/) {
      var cssroot = ('CSS1Compat' === doc.compatMode) 
                    ? doc.documentElement
                    : doc.body;
      return {
        x: event.clientX + /*@if (1) cssroot.scrollLeft @else@*/ view.pageXOffset /*@end@*/,
        y: event.clientY + /*@if (1) cssroot.scrollTop  @else@*/ view.pageYOffset /*@end@*/
      };
    }

    
    function onMouseEvent (event) {
      var cnt = has (event./*@if (1) srcElement @else@*/ target /*@end@*/);
      var obj;
      var point;
      
      if (0 > cnt)
        return;
      
      obj = memory[cnt];
      
      switch (event.type) {
      case 'mousedown' :
        if (! obj.state) {
          point = getMousePosition (event);
          obj.offsetX = obj.node.offsetLeft - point.x;
          obj.offsetY = obj.node.offsetTop  - point.y;
          obj.node.style.zIndex = obj.state = 1;
        }
        break;

      case 'mouseup' : case 'mouseout' :
        obj.node.style.zIndex = obj.state = 0;
        break;

      case 'mousemove' :
        if (obj.state) {
          point = getMousePosition (event);
          obj.node.style.top  = (point.y + obj.offsetY) + 'px';
          obj.node.style.left = (point.x + obj.offsetX) + 'px';
        }
        break;
      }
    }
    
    function onUnload () {
      doc./*@if (1) detachEvent ('on' + @else@*/ removeEventListener (/*@end@*/'mousedown', onMouseEvent, false);
      doc./*@if (1) detachEvent ('on' + @else@*/ removeEventListener (/*@end@*/'mouseup', onMouseEvent, false);
      doc./*@if (1) detachEvent ('on' + @else@*/ removeEventListener (/*@end@*/'mousemove', onMouseEvent, false);
      doc./*@if (1) detachEvent ('on' + @else@*/ removeEventListener (/*@end@*/'mouseout', onMouseEvent, false);
      view./*@if (1) detachEvent ('on' + @else@*/ removeEventListener (/*@end@*/'unload', onUnload, false)
      view = doc = null;
    }
  }


  function has (node) {
    var obj;
    var cnt;
    
    for (cnt = 0; obj = memory[cnt]; cnt += 1)
      if (node === obj.node)
        return cnt;
    return -1;
  };


  function add (node, x, y) {
    var style;

    if (0 > arguments.length)
      return;

    if (0 > has (node)) {
      style = node.style;
      style.position = 'absolute';
      style.top = (y || 0) + 'px';
      style.left = (x || 0) + 'px';
      
      memory.push (new Drag (node));
    }
  }

  //__________________________________
  
  Drag.add  = add;
  Drag.init = init;

  //__________________________________
  this.Drag = Drag;
})();

Drag.init (this);
Drag.add (document.getElementById ('drag0'), 100, 100);
Drag.add (document.getElementById ('drag1'), 200, 200);
</script>