<style>
		.dropped, .draggable {
			width: 150px;
			min-height: 150px;
			position: relative;
			display: inline-block;
			border: 1px solid gray;
			text-align: center;
			vertical-align: bottom;
		}
		
		img {
			width: 100px;
		}
	</style>

<h1>透過 HTML5 的 drag and drop 允許多個元件拖曳與多個元件放置</h1>

<div name="dropped" class="dropped"></div>
<div name="dropped" class="dropped"></div>
<div name="dropped" class="dropped"></div>
<hr />

<div class="draggable" ><img id='paper' src='images/paper.png' name="draggable" draggable="true"  /></div>
<div class="draggable" ><img id='rock' src='images/rock.png' name="draggable" draggable="true"  /></div>
<div class="draggable" ><img id='scissors' src='images/scissors.png' name="draggable" draggable="true"  /></div>