JavaScript 要素をドラッグできるようにする
div要素など、通常ドラッグできない要素をドラッグできるようにするには、要素のdoraggableプロパティにtrueを指定します。スクリプトではなく、HTML要素にdraggable属性を指定してもドラッグ可能になります。ただし、Firefoxに関しては、dragstartイベントが発生したら、setData()メソッドを使ってデータを設定する必要があります。draggableプロパティにfalseを設定すると、その要素はドラッグできなくなります。なお、img要素やa要素のリンク、テキストなど、デフォルトでドラッグ可能になっている場合は、draggableプロパティにfalseを指定しても効果はありません。
<head>
<title>テストページ</title>
<style>
div{
width: 200px;
height: 50px;
background-color: #ffd;
border:1px solid black;
}
</style>
</head>
<body>
<script>
window.addEventListener("load", function(){
var div = document.getElementsByTagName("div")[0];
div.draggable = true;
div.addEventListener("dragstart", function(event){
event.dataTransfer.setData("text/plain","dragItem");
},true)
},false);
</script>
<h1>ドラッグ&ドロップのサンプル</h1>
<div>ドラッグ可能です</div>
<div>ここはドラッグできません。</div>
<output></output>
</body>最初の黄色い背景のdiv要素の領域をドラッグすることはできます。
