JavaScript + Ajax 実践サンプル集 - ドラッグできるイメージ

ドラッグできるイメージ

説明補足説明コード関連書籍コメント投稿

このサンプルは、Webページにドラッグできるイメージを表示します。マウスでイメージをドラッグしたらWebページの任意の場所に移動してみてください。

ドラッグできるイメージを表示するには、img要素にclass属性を追加して「drag」を設定します。div要素に「class="drag"」属性を追加すると、img要素と同様にドラッグできます。

<img src="images/trav01.gif" class="drag" />

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Dragable Elements</title>
<style type="text/css">
.drag{
position:relative;
cursor:hand;
z-index: 100;
}
</style>

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(e){
    var evtobj=window.event? window.event : e
    this.targetobj=window.event? event.srcElement : e.target
    if (this.targetobj.className=="drag"){
      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(e){
    var evtobj=window.event? window.event : e
    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="images/trav01.gif" class="drag" /><br />
<img src="images/trav02.gif" class="drag" /><br />
<img src="images/trav03.gif" class="drag" /><br />
</body>
</html>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

ドラッグできるイメージ

JavaScript + Ajax 実践サンプル集 (1496本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

ドラッグできるイメージ

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!