ドラッグ＆ドロップしよう！ (1/5)
作成:2010-11-30 09:53
更新:2010-11-30 09:53
更新:2010-11-30 09:53
■ドラッグするだけなら属性１つ！
HTML5では、ドラッグ＆ドロップが簡単に実装できるようになりました。これを使ってみましょう。
まずは、ドラッグからです。ドラッグ可能かどうかを示すために、HTMLのタグには新たに「draggable」という属性が追加となりました。これは真偽値で設定されるもので、これを「true」にするだけで、その要素はドラッグ可能となります。
下に簡単なサンプルをあげておきます。ここでは、２つの<div>タグを用意してあります。実際にマウスで動かしてみてください。上の赤い<div>はドラッグできますが、下の緑の<div>はドラッグできないことが分かります。まったく何のスクリプトも書くことなく、ドラッグが実現できることがわかるでしょう。
ただし、やってみればわかりますが、ドラッグしてもこれを動かしたりすることはできません。ただ、半透明なゴーストをドラッグするだけです。ドラッグしてリアルタイムに要素の位置を動かしたりできるわけではないことがわかります。
つまり、ドラッグ＆ドロップで何かを操作するための基本的な仕組みが用意されている、というだけです。これだけで実際に何かを動かせるわけではありません。それには別途処理が必要です。
まずは、ドラッグからです。ドラッグ可能かどうかを示すために、HTMLのタグには新たに「draggable」という属性が追加となりました。これは真偽値で設定されるもので、これを「true」にするだけで、その要素はドラッグ可能となります。
下に簡単なサンプルをあげておきます。ここでは、２つの<div>タグを用意してあります。実際にマウスで動かしてみてください。上の赤い<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: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>
<div draggable="false" class="draggable"
style="background-color:green">
これは ドラッグできない
</div>
<hr>
</body>
</html>
※関連コンテンツ
「JavaScriptによるHTML5プログラミング入門」に戻る