サンプル
サンプル1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル1 （Operaは未実装）</title>
<style type="text/css">
#zone{
width:500px;
height:500px;
background-color:silver;
}
#dragzone{
color:white;
background-color:blue;
width:500px;
}
</style>
</head>
<body>
<p>
以下の要素を下の灰色のボックスにドラッグ＆ドロップすると、<br>
ドラッグによって格納されたデータの種別と内容が表示されます。<br>
（Safariでは、ドラッグ中にコントロールキーかシフトキーを<br>
押してからでなければドロップできません。また、取得できるのは種別のみです）
</p>
<hr>
<!-- 画像のドラッグ -->
<p>この画像をドラッグしてください</p>
<p><img id ="image" src="birds.jpg" ></p>
<!-- 選択した文字列のドラッグ -->
<div>この文字列を選択してドラッグしてください</div>
<!-- リンクのドラッグ -->
<p><a href="http://www.example.com/">このリンクをドラッグしてください</a></p>
<!-- 任意のHTML要素のドラッグ -->
<div id="dragzone" draggable="true" >
このHTML要素をドラッグしてください。（IEはdraggable未対応のためドラッグできません）
</div>
<br>
<!-- ドロップ先テキストエリア -->
<textarea id="zone"></textarea>
<script type="text/javascript">
// 明示的なドラッグ時のデータの設定処理
var d = document.getElementById("dragzone");
d.ondragstart = function(event){
event.dataTransfer.setData("Text",d.innerHTML);
}
//ドロップされたデータの取得と表示用関数
function disp(event,format){
try{
var data = event.dataTransfer.getData(format) ;
event.target.innerHTML += format + ":\n";
event.target.innerHTML += data;
event.target.innerHTML += "\n\n";
} catch(err){
console.log(err);
}
}
var z = document.getElementById("zone");
z.ondragover = function (event){
event.preventDefault();
}
// ドロップ時の処理
z.ondrop = function(event){
event.target.innerHTML = "";
var types = event.dataTransfer.types;
if(types){
for(var i = 0; i < types.length;i++){
disp(event,types[i]);
}
} else {
//types属性のないIE用コード
disp(event,"Text");
disp(event,"URL");
}
event.preventDefault();
}
</script>
</body>
</html>
サンプル2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル2 フィードバック用画像を表示させ、要素をドラッグで移動させる(IE、Opera未実装)</title>
<style type="text/css">
#drag_from{
border:solid 1px black;
width:500px;
}
</style>
</head>
<body>
<!-- フィードバック用画像 -->
<img id ="image" src="birds.jpg" draggable="false">
<br>
<hr>
<br>
<!-- ドラッグ元要素 -->
<div id="drag_from" draggable="true" >
この要素をドラッグすると、<br>上の画像がカーソル位置に表示されます。<br>
（なおIEとOperaは未実装のため、このサンプルを実行できません）
</div>
<script type="text/javascript">
var from = document.getElementById("drag_from");
// ドラッグ開始時のコールバック関数
from.ondragstart = function(event){
var dt = event.dataTransfer;
var img = document.getElementById("image");
dt.setDragImage(img,img.width/2,img.height/2);
dt.setData("Text",event.target.id);
}
</script>
</body>
</html>
サンプル用イメージ
下記JPGファイル（birds.jpg）を該当ディレクトリに保存してください。
関連項目
