draggable= - ドラッグ可能

トップ > HTMLリファレンス > draggable=

属性

<タグ名 draggable=value> - ドラッグ可能

説明

HTML5 でサポートを検討していましたが、最終案では不採用となりました。その要素がドラッグ可能であることを示します。

使用例

HTML
<!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 にドラッグ&ドロップしてみてください。

表示
TrashA
TrashB
TrashC
Dustbox

関連項目

dropzone=

Copyright (C) 2011-2017 杜甫々
初版:2011年5月29日 最終更新:2017年12月31日
http://www.tohoho-web.com/html/attr/draggable.htm