drag and drop DIV
je kan alles slepen op een web-pagina

home | index | menu | help

Er is geen CSS ondersteuning.

		
Sleep
mij gerust over
de gehele pagina.
Ik vind het niet erg...
		

Op de dns5 staat er al een procedure om plaatjes te verslepen op een pagina. Ik had er niet bij stil gestaan dat het niet duidelijk was dat de drag&drop-procedure voor alle elementen op een web-pagina zal werken. Tot het moment dat ik door de zoek-query van google-bezoekers (in de statistieken van de dns5.nl) er achter kwam dat er nog steeds gezocht werd op drag and drop div (nadát de plaatjes-drag-drop bezocht was). Nou, dit is snel op te lossen...

Plaats het onderstaande regeltje in jouw style-sheet:

<style type="text/css">.sleepp{position:relative;display:block;width:18em}</style>
		

Het onderstaande stukje javascript moet in de body van de pagina:

<script type="text/javascript">
	var ie=document.all,strikt=document.getElementById&&!document.all,gesleept=false,x,y,dexx,deyy,dobj;function doemuis(e){if(gesleept){dobj.style.left=strikt?dexx+e.clientX-x+"px":dexx+event.clientX-x+"px";dobj.style.top=strikt?deyy+e.clientY-y+"px":deyy+event.clientY-y+"px";return false;}}
	function muislos(e){gesleept=false;return false;}
	function kiesmuis(e){var fobj=strikt?e.target:event.srcElement;var topelement=strikt?"HTML":"BODY";while(fobj.tagName!=topelement&&fobj.className!="sleepp"){fobj=strikt?fobj.parentNode:fobj.parentElement;}
	if(fobj.className=="sleepp"){gesleept=true;dobj=fobj;dexx=parseInt((dobj.style.left+0),10);deyy=parseInt((dobj.style.top+0),10);x=strikt?e.clientX:event.clientX;y=strikt?e.clientY:event.clientY;document.onmousemove=doemuis;return false;}}
	document.onmousedown=kiesmuis;document.onmouseup=muislos;
</script>
		

En als laatste een div met de class "sleepp" die je overal in de body-sectie kan plaatsen.

<div class="sleepp">inhoud voor de div met drag-drop procedure</div>
		

De drag & drop procedure is valide html5, JSLint meldt dat de code van het javascript foutloos is, en de W3C-validator is tevreden met de CSS. Het is echt belangrijk om er voor te zorgen dat jouw pagina's zo min mogelijk fouten bevatten. Google is heel erg "gevoelig" voor inelkaar "geflansde" pagina's. Zo af en toe maak ik daar maar melding van...

cache 27-02-2011