画像をドラッグしてみよう！（DHTML関連） | 小技集

画像をドラッグしてみよう！

トップ > 小技集 > （DHTML関連）画像をドラッグしてみよう！

CSSとJavaScriptを使ってドラッグできる画像を作成してみましょう。

　以下の画像はドラッグできます。（IE、Safari動作確認。FireFoxでは残念ながら動きません。）

　ソースは以下のようになります。

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>ドラッグできる画像</title>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<style type="text/css">
.drag_forehand{
position:relative;
cursor:pointer;
z-index:200;
}
.drag_background{
position:relative;
cursor:pointer;
z-index:100;
}
</style>
<script type="text/javascript">
<!--
var dragobject={
  z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0,
  initialize:function(){
    document.onmousedown=this.drag
    document.onmouseup=function(){this.dragapproved=0}
  },
  drag:function(){
    var evtobj=window.event;
    this.targetobj=event.srcElement;
    if (this.targetobj.className=="drag_forehand"||this.targetobj.className=="drag_background"){
      this.dragapproved=1
      if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
      if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
      this.offsetx=parseInt(this.targetobj.style.left)
      this.offsety=parseInt(this.targetobj.style.top)
      this.x=evtobj.clientX
      this.y=evtobj.clientY
      if (evtobj.preventDefault)
        evtobj.preventDefault()
      document.onmousemove=dragobject.moveit
    }
  },
  moveit:function(){
    var evtobj=window.event;
    if (this.dragapproved==1){
      this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"
      this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"
      return false
    }
  }
}
dragobject.initialize();
//-->
</script>
</head>
<body>
<img src="img/drag1.jpg" class="drag_forehand" alt="この画像はドラッグできます" />  
<img src="img/drag2.jpg" class="drag_background" alt="この画像はドラッグできます" /><br />
<br /><br />
</body>
</html>

ソース解読のためのヒント

ポイント１：画像にCSSを適用する
	画像はimgタグで記述しますが、imgタグのclass属性にCSSのクラスを指定します。 position:relativeとすることで、画像の位置を相対的にし、 cursor:pointerとすることで、画像の上にマウスをあてたときにカーソルの形状を手の形にします。また、それぞれの画像のz-indexに異なる値を指定することで、ドラッグして重ねたときにどちらが上になるかを指定できます。

ポイント２： JavaScriptのオブジェクトについて
	JAVAはクラスベースのオブジェクト指向言語、JavaScriptはプロトタイプベースのオブジェクト指向言語。私を含め、JAVAのオブジェクト指向に慣れた人にはJavaScriptのオブジェクト指向はわかりづらいです。 JavaScriptにおけるオブジェクトの定義はvar オブジェクト名 = { };

ポイント３：オブジェクトのプロパティ
	オブジェクトのプロパティの定義は、プロパティ名:値,…

ポイント４：プロパティに関数を代入する＝メソッド
	通常のプロパティは上述のように値を設定しますが、プロパティ名:function( ){ …関数の定義… } と定義した場合、そのプロパティにアクセスした場合に対応する関数が呼び出され、メソッドのように扱うことができます。

　「画像をドラッグしてみよう！～応用・音量調節～」もご覧下さい。

トップ > 小技集 > （DHTML関連）画像をドラッグしてみよう！

トップ | このサイトについて | 管理者へメール | サイトマップ