KOMPOOS.NL

HTML5 drag & drop

home » manuals » html5 » drag-drop.html

sitemap | terug naar het html5 referentie - events - overzicht

voorbeeld drag & drop (versleep de plaatjes)

uitleg drag & drop procedure

De meeste html5-events die met drag & drop te maken hebben zitten wel in dit voorbeeld verwerkt. Plaats de code voor de head-sectie en de code voor de body-sectie (die hieronder staat) op de juiste plaats om deze procedure op jouw website te reproduceren.

drag & drop code voor de head-sectie

<style type="text/css">
	#drag_drop_field_1,#drag_drop_field_2{
		background-color:#808080;
		color:inherit;
		width:190px;
		height:270px;
		float:left;
		margin:15px;
		overflow:hidden}
	.drag_plaatje{
		z-index:2;
		width:80px;
		height:120px;
		float:right;	
		margin-right:10px;
		margin-top:10px}
	.clear_both{
		clear:both}	
</style>
<script>
	var is_iexp=document.namespaces?1:0;
	function drag_(target,e){
		e.dataTransfer.setData('Text',target.id);}
	function drop_(target,e){
		var utid=e.dataTransfer.getData('Text');
		target.appendChild(document.getElementById(utid));
		if(is_iexp){event.returnValue=false;}else{e.preventDefault();}}
</script>

alle code die (ergens) in de body sectie moet komen

<div id="drag_drop_field_1" ondrop="drop_(this,event)" ondragenter="return false" ondragover="return false">
	<div draggable="true" id="drag1" class="drag_plaatje" ondragstart="drag_(this,event)"><img alt="drag-1" width="80" height="120" src="drag-drop-1.jpg" /></div>
	<div draggable="true" id="drag2" class="drag_plaatje" ondragstart="drag_(this,event)"><img alt="drag-2" width="80" height="120" src="drag-drop-2.jpg" /></div>
	<div draggable="true" id="drag3" class="drag_plaatje" ondragstart="drag_(this,event)"><img alt="drag-3" width="80" height="120" src="drag-drop-3.jpg" /></div>
	<div draggable="true" id="drag4" class="drag_plaatje" ondragstart="drag_(this,event)"><img alt="drag-4" width="80" height="120" src="drag-drop-4.jpg" /></div>
</div> 
<div id="drag_drop_field_2" ondrop="drop_(this,event)" ondragenter="return false" ondragover="return false"></div> 
<div class="clear_both"></div>