Essa viene chiamata semplicemente dando all'evento window.onload istruzione di eguagliare l'evento document.onmousedown alla funzione OnMouseDown e l'evento document.onmouseup alla funzione OnMouseUp, e di impostare la proprietà di stile position a "absolute" per gli elementi che si vuole trascinabili.
Ora occupiamoci del canvas.
Dato che sto lavorando con Internet Explorer a causa del fatto che è l'unico browser che mi consente di salvare files su disco fisso, e quindi di mantenere e modificare archivi xml, devo imparare la sintassi del canvas per IE.
Anche il canvas può essere soggetto a DragDrop, impostando le giuste proprietà:
<!DOCTYPE HTML>
<html>
<head>
<style>
#mycanvas{
border:1px solid red;
position:absolute;
}
</style>
<script src="funzioni.js"></script>
<script src="dragdrop.js"></script>
<script>
function main(){
document.onmousedown=OnMouseDown;
document.onmouseup=OnMouseUp;
}
window.onload=main;
</script>
</head>
<body>
<canvas id="mycanvas" width="100" height="100">
</body>
</html>
Ecco: con il richiamo delle librerie "dragdrop.js" e "funzioni.js", e impostando quei semplici comandi, il canvas si muove se trascinato.
Nessun commento:
Posta un commento