{"id":385,"date":"2021-11-15T21:04:33","date_gmt":"2021-11-15T20:04:33","guid":{"rendered":"http:\/\/www.blog.serveurduke.fr\/?page_id=385"},"modified":"2021-11-15T21:04:33","modified_gmt":"2021-11-15T20:04:33","slug":"draganddrop","status":"publish","type":"page","link":"http:\/\/www.blog.serveurduke.fr\/index.php\/raspberry\/saisir-une-donnees\/draganddrop\/","title":{"rendered":"DragAndDrop"},"content":{"rendered":"

Un exemple de dragAndDrop.<\/p>\n

\"\"<\/a><\/p>\n

Il faut :
\nLancer la fonction dragAndDrop lors de l’affichage de la sc\u00e8ne.
\nRespecter le ID unique pour les \u00e9tiquettes.
\nAjouter les fichier javascript dans l’en-t\u00eate html de Hype :<\/p>\n

jquery-ui.min.js
\njquery-3.1.1.min.js<\/p>\n

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

Un exemple de dragAndDrop. Il faut : Lancer la fonction dragAndDrop lors de l’affichage de la sc\u00e8ne. Respecter le ID unique pour les \u00e9tiquettes. Ajouter les fichier javascript dans l’en-t\u00eate html de Hype : jquery-ui.min.js jquery-3.1.1.min.js <!– Files added by<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":374,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"_links":{"self":[{"href":"http:\/\/www.blog.serveurduke.fr\/index.php\/wp-json\/wp\/v2\/pages\/385"}],"collection":[{"href":"http:\/\/www.blog.serveurduke.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/www.blog.serveurduke.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/www.blog.serveurduke.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.blog.serveurduke.fr\/index.php\/wp-json\/wp\/v2\/comments?post=385"}],"version-history":[{"count":1,"href":"http:\/\/www.blog.serveurduke.fr\/index.php\/wp-json\/wp\/v2\/pages\/385\/revisions"}],"predecessor-version":[{"id":387,"href":"http:\/\/www.blog.serveurduke.fr\/index.php\/wp-json\/wp\/v2\/pages\/385\/revisions\/387"}],"up":[{"embeddable":true,"href":"http:\/\/www.blog.serveurduke.fr\/index.php\/wp-json\/wp\/v2\/pages\/374"}],"wp:attachment":[{"href":"http:\/\/www.blog.serveurduke.fr\/index.php\/wp-json\/wp\/v2\/media?parent=385"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}