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;
}
}
}