HTML5 でサポートを検討していましたが、最終案では不採用となりました。その要素がドラッグ可能であることを示します。
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<style>
.trash, .dustbox {
font-family: Arial;
font-size: 9pt;
border: 1px solid gray;
margin: 10px;
padding: 5px;
}
.trash {
width: 60px;
height: 16px;
background-color: #ccccff;
}
.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="trash" draggable="true" ondragstart="doDragStart(event)">TrashA</div>
<div class="trash" draggable="true" ondragstart="doDragStart(event)">TrashB</div>
<div class="trash" draggable="true" ondragstart="doDragStart(event)">TrashC</div>
<div class="dustbox" ondragover="doDragOver(event)" ondrop="doDrop(event, this)">Dustbox<br></div>
</body>
</html>
Google Chrome や Opera で、下記の TrashA, TrashB, TrashC を Dustbox にドラッグ＆ドロップしてみてください。