JavaScript + Ajax 実践サンプル集 (1127本以上) ◇編集して実行可能◇
jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...
ホーム
jQuery
jQuery プラグイン
jQuery UI
人気順
カテゴリ
キーワード
クール
新着
ツリー
jQuery PDF
ホット
サイト情報
サイトマップ
★ 新着サンプルトップ50のRSSを購読する
◆ DHTMLサンプル(基礎)のRSSを購読する
◆ DHTMLサンプル(応用)のRSSを購読する
◆ AJAXサンプルのRSSを購読する
◆ その他サンプルのRSSを購読する
◆ BOM(Browser Object Model)のRSSを購読する
◆ DOM(Document Object Model)のRSSを購読する
ドラッグできるイメージ
説明
補足説明
コード
関連書籍
コメント投稿
このサンプルは、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> <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(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>
コメント・提案の投稿！
名前
メール
件名
本文
送信中です...
このサンプルは、Webページにドラッグできるイメージを表示します。マウスでイメージをドラッグしたらWebページの任意の場所に移動してみてください。
このサンプルを編集して試してみる!
ドラッグできるイメージを表示するには、img要素にclass属性を追加して「drag」を設定します。div要素に「class="drag"」属性を追加すると、img要素と同様にドラッグできます。
<img src="images/trav01.gif" class="drag" />
Access
|
ASP.NET + Ajax
|
ASP.NET 3.5 + Ajax
|
JavaScript + jQuery