画像をドラッグする

[ IE4+, NN4, NN6, Mozilla, Opera6 ]

画像を読み込んだレイヤーごと移動させています。本来なら、レイヤーに対して onmousedown=...としたいところなんですが、NN4 だと中身の入ったレイヤーはイベントが通知されなくなるようで・・・

がんばって、多くのブラウザに対応しましたが、はたしてどういった場面で使われるかは謎です。

【実行例】

下の画像がドラッグ可です。無茶はしないでおきましょう。外に出したりとか。出せませんけど。＾＾；

サンプルソース

HTMLドキュメントの頭から全部書いておきます。実装するときの参考にしてください。留意点としては、赤字の部分を同じにすることくらいです。対になっていれば、画像を幾つでも配置することができます。
長ったらしいので、外部ファイルにするとよいかもしれません。→ dragimg.js

なお、Functions for CrossBrowserブロックに記述した関数は、はぎさんのJavaScript Tips集で公開されている『ライブラリ集』より拝借しました。併せてご参考に。（注：若干書き換えています）

<html>
<head>
<title>画像をドラッグする</title>
<script type="text/javascript">
<!--
// Functions for CrossBrowser-----------------------------------------
// DOM: 1=NN4, 2=IE4, 3=IE5+, 4=NN6+, 0=Others
DOM = document.all?(document.getElementById?3:2)
                  :(document.getElementById?4
                  :(document.layers?1:0));

function getDivFromName(idName){
  if(DOM>=3)
    return document.getElementById(idName);
  if(DOM==2)
    return document.all(idName);
  if(DOM==1){
    var s = '';
    for(var i=1; i<arguments.length; i++)
      s += 'document.layers.'+arguments[i]+'.';
    return eval(s+'document.layers.'+idName);
  }
  return null;
}
function getDivLeft(div){
  if(DOM>=3) return div.offsetLeft;
  if(DOM==2) return div.style.pixelLeft;
  if(DOM==1) return div.left;
  return 0;
}
function getDivTop(div){
  if(DOM>=3) return div.offsetTop;
  if(DOM==2) return div.style.pixelTop;
  if(DOM==1) return div.top;
  return 0;
}
function getPageX(e){
  if(window.opera)
    return e.clientX;
  if(DOM==4)
    return e.clientX+window.scrollX;
  if(DOM==3 || DOM==2)
    return document.body.scrollLeft+window.event.clientX;
  if(DOM==1)
    return e.pageX;
  return 0;
}
function getPageY(e){
  if(window.opera)
    return e.clientY;
  if(DOM==4)
    return e.clientY+window.scrollY;
  if(DOM==3 || DOM==2)
    return document.body.scrollTop+window.event.clientY;
  if(DOM==1)
    return e.pageY;
  return 0;
}
// Main Script--------------------------------------------------------
var selected = null;
var offsetX = 0;
var offsetY = 0;

function pickup(layerID,e){
  selected = getDivFromName(layerID);
  offsetX = getPageX(e) - getDivLeft(selected);
  offsetY = getPageY(e) - getDivTop(selected);
  if(DOM==4)
    document.onmousemove = dragMZ;
  if(DOM==3 || DOM==2)
    document.onmousemove = dragIE;
  if(DOM==1)
    document.onmousemove = dragNN;
  if(window.opera)
    document.onmousemove = dragOP;
}
function dragMZ(e){  // for Mozilla,NN6,etc
  var movetoX = e.clientX+window.scrollX-offsetX;
  var movetoY = e.clientY+window.scrollY-offsetY;
  selected.style.left = movetoX +'px';
  selected.style.top  = movetoY +'px';
  return false;
}
function dragIE(){  // for IE4+
  var movetoX = event.clientX+document.body.scrollLeft-offsetX;
  var movetoY = event.clientY+document.body.scrollTop -offsetY;
  selected.style.pixelLeft = movetoX;
  selected.style.pixelTop  = movetoY;
  return false;
}
function dragOP(e){  // for Opera
  var movetoX = e.clientX-offsetX;
  var movetoY = e.clientY-offsetY;
  selected.style.left = movetoX +'px';
  selected.style.top  = movetoY +'px';
  return false;
}
function dragNN(e){  // for NN4
  var movetoX = e.pageX-offsetX;
  var movetoY = e.pageY-offsetY;
  selected.moveTo(movetoX, movetoY);
  return false;
}
function clearAll() {
  document.onmousemove = "";
  selected = null;
  offsetX = 0;
  offsetY = 0;
}
// EventCapture-------------------------------------------------------
if(document.layers){
  document.captureEvents(Event.MOUSEMOVE);
  document.captureEvents(Event.MOUSEUP);
}
document.onmouseup = clearAll;
// -->
</script>
</head>

<body>

<div id="Layer1" style="position:absolute;"><img src="turip.jpg"
    onmousedown="pickup('Layer1',event);return false"></div>

</body>
</html>

【 実行例 】

サンプルソース

【実行例】