Er is geen CSS ondersteuning.
versleep de plaatjes
Opera, opera, opera... Wat doe je ons aan. Zelfs in IE6 werkt deze drag & drop feilloos. Dat deze HTML5 procedure soepel in IE werkt is niet zo vreemd. Zelfs in stokoude IE-browsers was drag & drop gewoon "native". In HTML5 is dit nu tot standaard verheven, en het is de bedoeling dat alle browsers die W3C respecteren, alles netjes uitvoeren. Dit is heel erg prettig. Voorheen had je hele "grote lappen" script nodig om een paar plaatjes op een pagina te kunnen verplaatsen. Nu doe je het met werkelijk een minimum aan code. Het is zelfs zo weinig, en zo makkelijk te implementeren dat ik de code gewoon op deze pagina zet, zonder een aparte (complete) voorbeeld-pagina te maken. Ik ga er van uit dat je de afmetingen van de plaatjes en de benamingen zelf kan aanpassen. Ik geef dus gewoon de code die ik voor deze pagina gebruikt heb. Voor de head-sectie heb ik de onderstaande code:
<style type="text/css">
#vak1,#vak2{
background-color:#030;
color:#ccc;
width:190px;
height:270px;
float:left;
margin:15px;
overflow:hidden;}
.plaatje{
width:80px;
height:120px;
float:right;
margin-right:10px;
margin-top:10px;}
#vak1{margin-left:100px}
</style>
<script>
var is_iexp=document.namespaces?1:0;
function slepen(target,e){
e.dataTransfer.setData('Text',target.id);}
function laatvallen(target,e){
var utid=e.dataTransfer.getData('Text');
target.appendChild(document.getElementById(utid));
if(is_iexp){event.returnValue=false;}else{e.preventDefault();}}
</script>
En de onderstaande code moet je ergens in de body-sectie van jouw pagina plaatsen. Als je de hele pagina wilt gebruiken dan kan je natuurlijk ook even met de rechtermuisknop de broncode van deze pagina open en alles integraal naar jouw webruimte kopieren. Dat geldt natuurlijk ook voor de plaatjes. Geen probleem als je ze even gebruikt om de procedure op jouw webruimte te testen.
<div id="vak1" ondrop="laatvallen(this,event)" ondragenter="return false" ondragover="return false"> <div draggable="true" id="drag1" class="plaatje" ondragstart="slepen(this,event)"><img src="http://jouwdomein.nl/drag1.jpg" /></div> <div draggable="true" id="drag2" class="plaatje" ondragstart="slepen(this,event)"><img src="http://jouwdomein.nl/drag2.jpg" /></div> <div draggable="true" id="drag3" class="plaatje" ondragstart="slepen(this,event)"><img src="http://jouwdomein.nl/drag3.jpg" /></div> <div draggable="true" id="drag4" class="plaatje" ondragstart="slepen(this,event)"><img src="http://jouwdomein.nl/drag4.jpg" /></div> </div> <div id="vak2" ondrop="laatvallen(this,event)" ondragenter="return false" ondragover="return false"></div>
cache 01-09-2010