Javascript Girl
  1. Javascript Girl
  3. Validation jquery basée sur des objets glisser-déposer
Intereting Posts
Chaîne de requête JavaScript Les graphiques NG2 ne peuvent pas se lier à 'jeux de données' car ce n'est pas une propriété connue de 'canvas' Comment accepter uniquement les touches alphabétiques apprises (pour un but "autocomplete") Mauvais comportement dans Google Chrome Object.defineProperty? Knockout.Js Syntaxe du filtre de tableau Personnages spéciaux dans routeparams exécutant le contrôleur deux fois en angularjs DOM: déterminez si l'ancreNode ou FocusNode est sur le côté gauche Indexation des moteurs de recherche des applications de la seule page Le modèle de pied de page clignote même en utilisant ng-cloak dans AngularJS GetElementById où l'élément est créé dynamiquement au moment de l'exécution Expression Javascript pour définir le nom de la propriété de l'objet? Mise à jour d'un iframe, d'un historique et d'une URL. Ensuite, faites-le fonctionner avec le bouton de retour Comment étendre un élément personnalisé existant? Quel est le but de l'objet booléen? Comment rejeter le mode modal en tapant l'écran dans ReactNative

Validation jquery basée sur des objets glisser-déposer

J'essaie d'apprendre à propos de jquery autant que possible, en examinant de nombreux exemples sur le Web, mais j'ai encore du problème avec les événements.

Comme vous pouvez le voir, j'ai fait une simple chose de glisser-déplacer en utilisant jquery UI, mais tous les exemples que j'ai trouvés autour ne m'ont pas aidé à valider cela.

J'ai créé correctementAnswers mais le problème est que je ne sais pas comment les valider. Comme il est facile à voir, 'a' passe à 1, 'b' passe à 2, et 'c' passe à 3, et lorsque je clique sur le bouton 'Soumettre', il valide. 

var correctAnswers = ['a-1,b-2,c-3']; $('.dragAble').draggable({ containment: "#content", cursor: "move", snap: ".dropAble" }); if (answers === correctAnswers) { $("#win").show(); } else { $("#fail").show(); };​

JSFiddle

Essayez ce code: 

 var correctAnswers = ['a-1', 'b-2', 'c-3']; var results = []; $('.dragAble').draggable({ containment: "#content", cursor: "move", snap: ".dropAble", }); $( ".dropAble" ).droppable({ drop: function( event, ui ) { results.push($(ui.draggable).attr("id") + '-' + $(this).attr("id")); } }); $("#submit").click(function(){ console.log(results); result = true; $.each(results, function(index, value){ if($.inArray(value, correctAnswers ) == -1){ result = false; } if(!result) return; }); if (result) { $("#win").show(); } else { $("#fail").show(); }; });​

Voici le violon http://jsfiddle.net/aanred/x3jF3/ . Mais ce code n'a qu'une fonction de base dont vous avez besoin pour l'améliorer.