draggable= - ドラッグ可能

属性

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

サポート

https://caniuse.com/mdn-html_global_attributes_draggable

説明

その要素がドラッグ可能か否かを指定します。ドラッグ可能要素のドラッグが始まると dragstart イベントが発生します。ドラッグ対象要素にドラッグ可能要素が重なると dragover イベントが発生し、ドロップすると drop イベントが発生します。

true : ドラッグ可能。
false : ドラッグ不可。

使用例

HTML

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

表示

TrashA

TrashB

TrashC

Dustbox

リンク

初版:2011年5月29日最終更新:2017年12月31日

https://www.tohoho-web.com/html/attr/draggable.htm

draggable= - ドラッグ可能

属性

サポート

説明

使用例

関連項目

リンク