JavaScript ドラッグ要素からドロップ要素にデータを渡す
ドラッグ先の要素からドロップ先の要素にデータを渡すには、「setData()」メソッドを使います。setData()メソッドの最初のパラメータにMIMEタイプ、２番目に渡したいデータを指定します。2番目のデータは、最初のパラメータに指定したMIMEタイプに対応したものになります。ドロップ先では、「getData()」メソッドのパラメータには、受け取りたいデータのMIMEタイプを指定します。標準テキストであれば「text/plain」を指定します。サンプルでは、ページ内にある要素だけでなく他のアプリケーションからのデータもドロップすることができます。その際は、アプリケーションから渡されたデータが表示されます。
<head>
<title>テストページ</title>
<style>
div{
width: 200px;
height: 50px;
background-color: #ffd;
border:1px solid black;
}
</style>
</head>
<body>
<script>
window.addEventListener("load", function(){
var ele = document.getElementsByTagName("output")[0];
var div = document.getElementsByTagName("div");
var dropArea = document.getElementById("dropbox");
for(var i=0; i<2; i++){
div[i].draggable = true;
div[i].addEventListener("dragstart", function(event){
event.dataTransfer.setData("text/plain",this.innerHTML);
},true);
}
//ドロップ領域に入った場合の処理
dropArea.addEventListener("dragover", function(event){
event.preventDefault();
},true);
//ドロップ領域から離れた場合の処理
dropArea.addEventListener("dragleave", function(event){
event.preventDefault();
},true);
//ドロップした場合の処理
dropArea.addEventListener("drop", function(event){
//デフォルトのイベント動作を禁止する
event.preventDefault();
var text = event.dataTransfer.getData("text/plain");
ele.innerHTML = "ドロップしました"+text;
},true);
},false);
</script>
<h1>Dragデータの受け渡し</h1>
<div>X81000</div>
<div>TT6400</div>
<div id="dropbox">ここにドロップできます</div>
<output></output>
</body>
</html>1番目か２番目のdiv要素の領域をドラッグして一番下のdiv要素にドロップすると、ドロップ先にはdiv要素内に表示されているテキストデータが渡され、内容が表示されます。
