ドラッグ＆ドロップしよう！ (2/5)
作成:2010-11-30 10:03
更新:2010-11-30 10:03
更新:2010-11-30 10:03
■ドロップ可能にする
では、このHTML5に用意されているドラッグ＆ドロップは、どういう使い方をするためのものなのか。それは、「要素を何か他の要素にドロップして処理を行う」ためのものです。つまり、何かを動かすアニメーションを作ったりするためではなく、ドラッグ＆ドロップで設定を行ったり表示を変えたりするためのものなのです。従って、「ドロップする側」の要素を用意しなければ意味がありません。
デフォルトでは、HTMLの要素はすべてドロップ不可に設定されています。また、ドラッグのように「この属性を設定すればドロップ可能になる」といった便利なものもありません。
ドロップというのは、ドラッグと比べると面倒な処理が必要となります。例えば、どんなものをドロップできるようにするのか、何をドロップしたのか、状況に応じた処理が必要となります。そこで、HTML5の要素には、ドロップ時のイベント属性を用意し、その中で必要な処理を実行してドロップの受け入れなどを行うようになっているのです。
ドラッグされたオブジェクトがドロップされるとき、その要素の「ondragover」という属性に設定された処理が呼び出されます。ここで処理を実行後、trueを返すとそのままondragoverイベントが継続され、デフォルトの処理が実行される（つまりドロップされない）ことになります。falseを返すとイベントはそこで消費され、デフォルトの処理はされないようになり、ドロップできるようになります。
また、eventオブジェクトの「preventDefault」というmethodを呼び出しても、デフォルトの動作をキャンセルしてドラッグできるようにすることができます。
以下に簡単なサンプルをあげておきましょう。ここでは、赤い<div>タグをドラッグし、青い<div>内にドロップできるようになっています。青いエリアの上に移動すると、カーソルがドロップ受け入れを示すものに変わります。
ただし、まだドロップ時の処理は何もないので、ドロップしても何も変化はありません。
デフォルトでは、HTMLの要素はすべてドロップ不可に設定されています。また、ドラッグのように「この属性を設定すればドロップ可能になる」といった便利なものもありません。
ドロップというのは、ドラッグと比べると面倒な処理が必要となります。例えば、どんなものをドロップできるようにするのか、何をドロップしたのか、状況に応じた処理が必要となります。そこで、HTML5の要素には、ドロップ時のイベント属性を用意し、その中で必要な処理を実行してドロップの受け入れなどを行うようになっているのです。
ドラッグされたオブジェクトがドロップされるとき、その要素の「ondragover」という属性に設定された処理が呼び出されます。ここで処理を実行後、trueを返すとそのままondragoverイベントが継続され、デフォルトの処理が実行される（つまりドロップされない）ことになります。falseを返すとイベントはそこで消費され、デフォルトの処理はされないようになり、ドロップできるようになります。
また、eventオブジェクトの「preventDefault」というmethodを呼び出しても、デフォルトの動作をキャンセルしてドラッグできるようにすることができます。
以下に簡単なサンプルをあげておきましょう。ここでは、赤い<div>タグをドラッグし、青い<div>内にドロップできるようになっています。青いエリアの上に移動すると、カーソルがドロップ受け入れを示すものに変わります。
ただし、まだドロップ時の処理は何もないので、ドロップしても何も変化はありません。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5</title>
<style>
div.draggable {
width:100px;height:50px;
}
div.droppable {
width:200px;height:100px;
}
</style>
</head>
<body>
<h1>Drag & Drop Sample</h1>
<p id="msg"></p>
<div draggable="true" class="draggable"
style="background-color:red">
ドラッグできます
</div>
<hr>
<div ondragover="event.preventDefault();" class="droppable"
style="background-color:blue">
ここにドロップ！
</div>
</body>
</html>
※関連コンテンツ
「JavaScriptによるHTML5プログラミング入門」に戻る