<tagName draggable=value> - ドラッグ可能
その要素がドラッグ可能か否かを指定します。ドラッグ可能要素のドラッグが始まると dragstart イベントが発生します。ドラッグ対象要素にドラッグ可能要素が重なると dragover イベントが発生し、ドロップすると drop イベントが発生します。
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<style>
.my-trash,
.my-dustbox {
font-family: Arial;
font-size: 9pt;
border: 1px solid gray;
margin: 10px;
padding: 5px;
}
.my-trash {
width: 60px;
height: 16px;
background-color: #ccccff;
}
.my-dustbox {
width: 400px;
height: 100px;
background-color: #ffcccc;
}
</style>
<script>
function doDragStart(event) {
var name = event.target.innerHTML;
event.dataTransfer.setData("text/plain", name);
}
function doDragOver(event) {
event.preventDefault();
}
function doDrop(event, dustbox) {
event.preventDefault();
var name = event.dataTransfer.getData("text/plain");
dustbox.innerHTML += (name + " ");
}
</script>
</head>
<body>
<div class="my-trash" draggable="true" ondragstart="doDragStart(event)">TrashA</div>
<div class="my-trash" draggable="true" ondragstart="doDragStart(event)">TrashB</div>
<div class="my-trash" draggable="true" ondragstart="doDragStart(event)">TrashC</div>
<div class="my-dustbox" ondragover="doDragOver(event)" ondrop="doDrop(event, this)">Dustbox<br></div>
</body>
</html>
Google Chrome や Opera で、下記の TrashA, TrashB, TrashC を Dustbox にドラッグ＆ドロップしてみてください。