子Windowの作成とドラッグ＆ドロップを実装する

Ajax

innerhtml2.html

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>半透明のウィンドウを表示する</title>
    <link href="common.css" rel="stylesheet" type="text/css" />
    <link href="childwin.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="innerhtml2.js"></script>
  </head>
  <body>
    <div>
      <a href="#" id="tokyo">東京の天気</a>
      <a href="#" id="nagoya">名古屋の天気</a>
      <a href="#" id="osaka">大阪の天気</a>
    </div>
    <br />
    <br />
    <div id="board">
      <div id="bar"><input type="button" id="close" value="close" /></div>
      <div id="content">now loading...</div>
    </div>
  </body>
</html>

common.css

body{
  font-family: "MS P ゴシック";
  font-family: Helvetica,Arial,sans-serif;
  color: #4c4c4c;
}
h1 {
  font-size: 16px;
}

h2 {
  font-size: 14px;
}
h3 {
  font-size: 12px;
}
p {
  font-size: 12px;
}
div {
  font-size: 12px;
}

childwindow.css

body{
  font-family: "MS P ゴシック";
  font-family: Helvetica,Arial,sans-serif;
  color: #4c4c4c;
}
h1 {
  font-size: 16px;
}

h2 {
  font-size: 14px;
}
h3 {
  font-size: 12px;
}
p {
  font-size: 12px;
}
div {
  font-size: 12px;
}

innerhtml2.js

//グローバル変数の定義
var httpObj;          // HTTP通信用オブジェクト
var timerId;          // HTTP通信用タイマーオブジェクト
var timeout_sec = 10; // タイムアウトの秒数
var fadeout_opacity = 70; // 子ウィンドウの不透明度初期値
var fadeout_timer;    // 子ウィンドウフェードアウト用タイマーオブジェクト
var board_top_dif;    //マウスポインタと子ウィンドウのY座標の差分
var board_left_dif;   //マウスポインタと子ウィンドウのX座標の差分

// ドラッグ開始
function dragStart(e){
  var board = document.getElementById('board');
  board_left_dif = e.clientX - parseInt(board.style.left);
  board_top_dif  = e.clientY - parseInt(board.style.top);
  
  var bar = document.getElementById('bar');
  addListener(bar, 'mousemove',moveChildWindow,false);
  addListener(bar, 'mouseup', dragEnd, false);
  addListener(bar, 'mouseout', dragEnd, false);

}

function dragEnd(e){
  var bar = document.getElementById('bar');
  removeListener(bar,'mousemove', moveChildWindow, false);
  removeListener(bar,'mouseeup', dragEnd, false);
  removeListener(bar,'mouseeout', dragEnd, false);
}

function moveChildWindow(e){
  var board = document.getElementById('board');
  board.style.left = (e.clientX - board_left_dif) + 'px';
  board.style.top  = (e.clientY - board_top_dif)  + 'px';
}

// 子ウインドウを閉じる
function closeChildWindow(){
  var board = document.getElementById('board');
  var ua = navigator.userAgent;
  if(ua.indexOf("Opera")>=0){
    board.style.visibility = 'hidden';
    return;
  }
  var func_ref = function(){
    fadeout_opacity = fadeout_opacity -10;
    if(fadeout_opacity <= 0){
      clearInterval(fadeout_timer);
      board.style.visibility = 'hidden';
      fadeout_opacity = 70;
    }
    board.style.filter = 'alpha(opacity=' + fadeout_opacity +')';
    var non_ie_opacity = fadeout_opacity / 100;
    board.style.mozOpacity = non_ie_opacity;
    board.style.opacity = non_ie_opacity;
  };
  fadeout_timer = setInterval(func_ref,100);
}

// 子ウィンドウを開く
function openChildWindow(e){
  var board = document.getElementById('board');
  board.style.left = e.clientX + 'px';
  board.style.top = e.clientY + 'px';
  board.style.visibility = 'visible';

  // チェックされたリンクのｉｄ属性を取得
  var target_node;
  if(e.target){
    target_node = e.target;
  } else if(e.srcElement){
    target_node = e.srcElement;
  }

  // Safari対策
  if (target_node.nodeType == 3){
    target_node = target_node.parentNode;
  }

  var checked_link = target_node.id;

  // テキストファイルのURLを定義
  var target_url;
  if(checked_link == 'tokyo'){
    target_url = 'content1.txt';
  } else if(checked_link == 'nagoya'){
    target_url = 'content2.txt';
  } else if(checked_link == 'osaka'){
    target_url = 'content3.txt';
  }

  var funcRef = function(text_data){
    var content = document.getElementById('content');
    content.innerHTML = text_data;
    board.style.filter = 'alpha(opacity=70)';
    board.style.mozOpacity = 0.7;
    board.style.opacity = 0.7;
  }

  httpRequest(target_url, funcRef);
}

// 引数に与えられたURLにHTTPリクエストを行い、指定された関数を実行
function httpRequest(target_url, functionReference){
  try{
    if(window.XMLHttpRequest){
      httpObj = new XMLHttpRequest();
    } else if(window.ActiveXObject){
      httpObj = new ActiveXObject("Microsoft.XMLHTTP");
    } else {
    httpObj = false;
    }
  } catch(e){
    httpObj = false;
  }
  if(! httpObj){
    httpObjGenerateFail();
  }
  // タイマーセット
  timerId = setInterval('timeoutCheck()', 1000);

  httpObj.open("GET", target_url, true);
  httpObj.onreadystatechange= function(){
    if (httpObj.readyState == 4){
      clearInterval(timerId);
      if (httpObj.status == 200){
        functionReference(httpObj.responseText);
      } else {
        alert(httpObj.status + ' : ' + httpObj.statusText);
        return false;
      }
    }
  }
  httpObj.send('');
}

// XMLHttpRequestオブジェクトの生成に失敗した場合
function httpObjGenerateFail(){
  alert('ご利用のブラウザは当サイトを利用できません！');
  return false;
}

// HTTPタイムアウトの処理
function timeoutCheck(){
  timeout_sec --;
  if(timeout_sec <= 0){
    clearInterval(timerId);
    httpObj.abort();
    alert('タイムアウト');
    return false;
  }
}

// イベントリスナーをセットする 
function setListeners(e){
  var tokyo = document.getElementById('tokyo');
  addListener(tokyo, 'click',openChildWindow,false);
  var nagoya = document.getElementById('nagoya');
  addListener(nagoya, 'click',openChildWindow,false);
  var osaka = document.getElementById('osaka');
  addListener(osaka, 'click',openChildWindow,false);
  var close = document.getElementById('close');
  addListener(close, 'click', closeChildWindow, false);
  var bar = document.getElementById('bar');
  addListener(bar, 'mousedown', dragStart, false);

}

function removeListener(elem, eventType, func, cap){
  if(elem.removeEventListener){
    elem.removeEventListener(eventType, func, cap);
  } else if(elem.detachEvent){
    elem.detachEvent('on' + eventType, func);
  }
}

function addListener(elem, eventType, func, cap){
  if(elem.addEventListener){
    elem.addEventListener(eventType,func,cap);
  } else if(elem.attachEvent){
    elem.attachEvent('on'+eventType,func);
  } else {
    alert('ご利用のブラウザは対応していません！');
    return false;
  }
}
addListener(window,'load',setListeners,false);