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
関連項目
dropzone=リンク
- https://html.spec.whatwg.org/multipage/dnd.html#the-draggable-attribute
- https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/draggable
- https://caniuse.com/mdn-html_global_attributes_draggable
Copyright (C) 2011-2017 杜甫々
初版:2011年5月29日 最終更新:2017年12月31日
https://www.tohoho-web.com/html/attr/draggable.htm