back

ドラッグ＆ドロップしよう！ (3/5)

■ドラッグを受け付ける

では、ドラッグした要素を受け付け、必要な処理を行わせてみましょう。まずは、HTMLのコードを作成しておきます。

下のリストが、簡単なサンプルです。ここでは、ドラッグ可能な<div>と、それをドロップする<div>を用意してあります。また、<script>タグで、script.jsというスクリプトを読み込むようにしてあります。JavaScriptの処理は、すべてここにまとめることにします。

まず、ドラッグから見てみましょう。<div>タグには、draggable="true"を設定してドラッグ可能にしてあります。この他に、ondragstart="return doDragStart(event);"という属性が追加されていますね。この「ondragstart」は、ドラッグを開始したときのイベント用属性です。ここで、ドラッグに関する下準備を行うのです。

ドラッグ＆ドロップを行う場合、この操作でドラッグ元のどういうデータを受け渡すか、ということを考える必要があります。このondragstartに設定したdoDragStartという関数で、この処理を用意することにします。

続いてドロップ側です。この<div>タグでは、以下の２つのイベント用属性が追加されています。
ondragover="doDragOver(event);"
ondrop="doDrop(event);"
ondragoverが、ドラッグしてオブジェクトをここにドロップしようとするときのイベントで、ondropが実際にドロップされたときのイベント処理となります。ondragoverでは、ドロップの受け入れなどに関する処理を行い、ondropでは実際にドロップで受け渡されたデータの処理などを行います。

これでタグの用意はできました。後は、スクリプトを作成するだけです。


(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>



　 　

記事のリストに戻る



PC Site G+ mail
copyright 2009. SYODA-tuyano.