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>