DragAndDrop

Un exemple de dragAndDrop.

Il faut :
Lancer la fonction dragAndDrop lors de l’affichage de la scène.
Respecter le ID unique pour les étiquettes.
Ajouter les fichier javascript dans l’en-tête html de Hype :

jquery-ui.min.js
jquery-3.1.1.min.js

<!– Files added by the Resource Library –>
<script type= »text/javascript » src= »${resourcesFolderName}/jquery-3.1.1.min.js »></script>
<script type= »text/javascript » src= »${resourcesFolderName}/jquery-ui.min.js »></script>
Voici le code de la fonction :
Function dragAndDrop(hypeDocument, element, event) {
window.eval3Compteur=0;
//document.getElementById(« QCMQ1 »).style.left = « 0 »;
    //List the id’s of all the draggable elements in an array
    var dragElements = [
      « #QCMQ1 »,
      « #QCMQ2 »,
      « #QCMQ3 »,
      « #QCMQ4 »,
      « #QCMQ5 »,
      « #QCMQ6 »,
      « #QCMQ7 »
    ];
    
    //List the ids of all the drop targets in an array
    var dropElements = [
      « #QCMR1 »,
      « #QCMR2 »,
      « #QCMR3 »,
      « #QCMR4 »,
      « #QCMR5 »,
      « #QCMR6 »,
      « #QCMR7 »
    ];
    
    var correctDrops = 0;
    var errorDrops = 0;
    //Loop through all the elements in the `dragElements` array
    dragElements.forEach(function(dragElement, index) {
    
      //Make the `#drag` element draggable
 $(dragElement).draggable({
   //Contain the draggable element to the parent container 
   containment: « parent », 
   //Make the element snap back to its original position if
   //it’s not released over the drop target
   revert: « invalid »
 });    
 
 //Set the drag element’s matching `drop` element as the drop target
 $(dropElements[index]).droppable({ 
   //Tell the droppable element that it should use the call the 
   //`handleDrop` function when an element is dropped over it
   //(See the code for the `handleDrop` function ahead)
   drop: handleDrop,
   //The name of the element that the drop target should accept
   accept: dragElement,
        //Change the mouse icon to a pointing hand when it’s over the 
        //draggable element
   cursor: « pointer »
 });
    });
    //The `handleDrop` function is called when the a draggable element is 
    //released over a droppable element
function handleDrop(event, ui) {
//alert(‘B1 from switchon function = ‘);
 //Display the name of the dropped element in the console for testing purposes
 //`ui.draggable` refers to the dropped element
 console.log(ui.draggable.attr(‘id’));
 //Snap the dragged element to the drop target  
 $(ui.draggable)
   .detach()               //Remove the draggable element from its current parent
   .css({top: 0,left: -90})  //Set its absolute position to the top left corner 
   .appendTo(this);        //Set this droppable element as the draggable element’s new parent
  
 //Add one to the drop count 
 correctDrops +=1;  
 
 //Check to see if all the elements have been dropped into the correct targets
 checkForCompletion()
    }
    
    function checkForCompletion(){
            $(message).html(window.eval3Compteur);
      if (correctDrops === dropElements.length) {
        $(message).html(« Correct! »);
        
        window.eval3Compteur
        hypeDocument.getElementById(« eval3SUIVANT »).style.display = « block »;
        window.eval3=1;
      }
    }
}