ドラッグ＆ドロップしよう！ (3/5)
作成:2010-11-30 10:58
更新:2010-11-30 10:58
更新:2010-11-30 10:58
■ドラッグを受け付ける
では、ドラッグした要素を受け付け、必要な処理を行わせてみましょう。まずは、HTMLのコードを作成しておきます。
下のリストが、簡単なサンプルです。ここでは、ドラッグ可能な<div>と、それをドロップする<div>を用意してあります。また、<script>タグで、script.jsというスクリプトを読み込むようにしてあります。JavaScriptの処理は、すべてここにまとめることにします。
まず、ドラッグから見てみましょう。<div>タグには、draggable="true"を設定してドラッグ可能にしてあります。この他に、ondragstart="return doDragStart(event);"という属性が追加されていますね。この「ondragstart」は、ドラッグを開始したときのイベント用属性です。ここで、ドラッグに関する下準備を行うのです。
ドラッグ＆ドロップを行う場合、この操作でドラッグ元のどういうデータを受け渡すか、ということを考える必要があります。このondragstartに設定したdoDragStartという関数で、この処理を用意することにします。
続いてドロップ側です。この<div>タグでは、以下の２つのイベント用属性が追加されています。
これでタグの用意はできました。後は、スクリプトを作成するだけです。
下のリストが、簡単なサンプルです。ここでは、ドラッグ可能な<div>と、それをドロップする<div>を用意してあります。また、<script>タグで、script.jsというスクリプトを読み込むようにしてあります。JavaScriptの処理は、すべてここにまとめることにします。
まず、ドラッグから見てみましょう。<div>タグには、draggable="true"を設定してドラッグ可能にしてあります。この他に、ondragstart="return doDragStart(event);"という属性が追加されていますね。この「ondragstart」は、ドラッグを開始したときのイベント用属性です。ここで、ドラッグに関する下準備を行うのです。
ドラッグ＆ドロップを行う場合、この操作でドラッグ元のどういうデータを受け渡すか、ということを考える必要があります。このondragstartに設定したdoDragStartという関数で、この処理を用意することにします。
続いてドロップ側です。この<div>タグでは、以下の２つのイベント用属性が追加されています。
ondragover="doDragOver(event);"ondragoverが、ドラッグしてオブジェクトをここにドロップしようとするときのイベントで、ondropが実際にドロップされたときのイベント処理となります。ondragoverでは、ドロップの受け入れなどに関する処理を行い、ondropでは実際にドロップで受け渡されたデータの処理などを行います。
ondrop="doDrop(event);"
これでタグの用意はできました。後は、スクリプトを作成するだけです。
(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>
<script type="text/javascript" src="script.js"
charset="UTF-8"></script>
</head>
<body onload="init();">
<h1>Drag & Drop Sample</h1>
<p id="msg"></p>
<div draggable="true" ondragstart="return doDragStart(event);" class="draggable"
style="background-color:red">
ドラッグできます
</div>
<hr>
<div ondragover="doDragOver(event);" ondrop="doDrop(event);" class="droppable"
style="background-color:green">
ここにドロップ！
</div>
</body>
</html>
※関連コンテンツ
「JavaScriptによるHTML5プログラミング入門」に戻る