Fabriquer un maker Drag and Drop

Les makers Drag and Drop sont des générateurs. Ils ne sont utilisables que sous IE.

Ce n'est pas très difficile, mais laborieux à faire.

Vous créez un tableau :

1ère ligne : vous mettez les images qui se placent tout en dessous : cadres, lignes...en les plaçant dans un nouveau tableau

2ème ligne : vous créez la zone de travail : un tableau d'une cellule (1colonne-1ligne) dont le fond est blanc

3ème ligne : vous mettez les images qui se placeront dessus : personnages, alphabet, etc..

Ce tableau est extensible à l'infini. Mais n'oubliez pas que
- les images qui se mettent en-dessous de la création doivent être en début de tableau.
- ce n'est pas agréable de devoir "draguer" une image sur plusieurs kilomètres
- ni de devoir attendre une heure le chargement de la page car elle contient trop d'images.

Je vous conseillerai donc de ne pas faire des maker trop longs.

Vous obtenez un tableau de ce genre : il est encore inactif à cette phase

CADRES image2 image3 image4 image5 image11 image12 image13 image14 image15

ZONE DE TRAVAIL

PERSONNAGES PERSONNAGE2 PERSONNAGE3  PERSONNAGE4 PERSONNAGE5 PERSONNAGE6   PERSONNAGE7 PERSONNAGE8  PERSONNAGE9

En HTML le tableau ci-dessus est représenté en police noire.

1) Vous allez rajouter ce qui est en rouge :

• class=drag  devra être rajouté pour chaque image
  
• le code javascript

2) Vous allez mettre certaines bordures intérieures à 0 (ce qui est en vert)

 <STYLE>
.drag{position:relative;cursor:hand}
</STYLE>

<SCRIPT language=JavaScript1.2>
/*
Drag and Drop Script-
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/

var dragapproved=false
var z,x,y
function move(){
    if (event.button==1&&dragapproved){
        z.style.pixelLeft=temp1+event.clientX-x
        z.style.pixelTop=temp2+event.clientY-y
        return false
    }
}
function drags(){
    if (!document.all)
    return
    if (event.srcElement.className=="drag"){
        dragapproved=true
        z=event.srcElement
        temp1=z.style.pixelLeft
        temp2=z.style.pixelTop
        x=event.clientX
        y=event.clientY
        document.onmousemove=move
    }
}
document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")
</SCRIPT>

<table cellspacing="1" cellpadding="1" align="center" border="1">
 <tbody>
  <tr>
   <td>
   <p align="center">CADRES</p>
   <table cellspacing="1" cellpadding="1" align="center" border="0">
    <tbody>
     <tr>
      <td><img class=drag  src="http://www.casimages.com/img/gif/0707070929046265818881.gif" width="100" /></td>
      <td>image2</td>
      <td>image3</td>
      <td>image4</td>
      <td>image5</td>
     </tr>
     <tr>
      <td colspan="5"><img class=drag  src="http://www.casimages.com/img/gif/0707070805286265818700.gif" /></td>
     </tr>
     <tr>
      <td>image11</td>
      <td>image12</td>
      <td>image13</td>
      <td>image14</td>
      <td>image15</td>
     </tr>
    </tbody>
   </table>
   </td>
  </tr>
  <tr>
   <td>
   <p align="center">ZONE DE TRAVAIL</p>
   <table cellspacing="1" cellpadding="1" width="500" align="center" border="1">
    <tbody>
     <tr>
      <td bordercolor="#000033" width="500" bgcolor="#f5f5dc" height="200"></td>
     </tr>
    </tbody>
   </table>
   </td>
  </tr>
  <tr>
   <td>
   <p align="center">PERSONNAGES</p>
   <table cellspacing="1" cellpadding="1" align="center" border="0">
    <tbody>
     <tr>
      <td><img class=drag  src="http://www.casimages.com/img/gif/0707060539046265816398.gif" /></td>
      <td>PERSONNAGE2</td>
      <td>PERSONNAGE3</td>
     </tr>
     <tr>
      <td>PERSONNAGE4</td>
      <td>PERSONNAGE5</td>
      <td>PERSONNAGE6</td>
     </tr>
     <tr>
      <td>PERSONNAGE7</td>
      <td>PERSONNAGE8</td>
      <td>PERSONNAGE9</td>
     </tr>
    </tbody>
   </table>
   </td>
  </tr>
 </tbody>
</table>

et vous obtiendrez ceci : il est maintenant actif ; vous pouvez le tester avec Internet Explorer

CADRES image2 image3 image4 image5 image11 image12 image13 image14 image15

ZONE DE TRAVAIL

PERSONNAGES PERSONNAGE2 PERSONNAGE3 PERSONNAGE4 PERSONNAGE5 PERSONNAGE6 PERSONNAGE7 PERSONNAGE8 PERSONNAGE9

Vos visiteurs créeront leurs tags en déplaçant les images vers la zone de travail.
Une fois, l'oeuvre complétée, ils font un IMPRIM ECRAN et la récupérent sur Paint.