Test logique complexe sur glisser pour tester l'élément déplacé par rapport aux attributs de zone de dépôt

Question

J'ai une liste de div dans un conteneur. J'ai déjà installé et travaillé le dragula. Chacune de ces divs possède des attributs de données: data-age, data-gender, data-grade. Tous les divs n'auront pas tous les attributs.

<div data-personaliasid="f193edc1-8f54-474b-bdd6-8c2fe2536513" data- 
fullname="Sophie Kurtis" data-name="Kurtis" data-age="10" data- 
gender="2" data-grade="6" class="well persondiv" style="margin- 
bottom:2px; padding:5px;">...</div> 

Pour les zones de dépôt J'ai divs qui ont également certains/tous/aucun des attributs données suivantes: data-gender, data-gradestart, data-gradend, data-agestart, data-ageend.

<div class="dragula-container memberlist panel-body" id="48aa8cfd-264d- 
4d40-9550-e8741c1b3d41" style="min-height: 100px;" data-gender="1" 
data-gradestart="12" data-gradeend="10" data-agestart="" data- 
ageend="">...</div> 

Parce que les éléments et la zone de largage sont créées dynamiquement, je ne peux pas dire si tous les attributs de données sera toujours présent sur la personne ou la zone de chute de memberlist.

J'essaye de créer un .on('drag',function(source){}) qui établira des tests avec les filtres présents sur le groupe et exécutera les attributs de données de personne correspondants par le test et échouera si l'un d'eux échoue.

persondiv data-gender == memberslist data-gender 
persondiv data-age between memberslist data-agestart and data-ageend 
persondiv data-grade(number) between memberslist data-gradestart and data-gradeend 

Malheureusement, je ne peux pas envelopper ma tête pour savoir par où commencer.

Answer 1

C'est le meilleur que j'ai pu trouver, mais il vérifie les variables pour chaque groupe et ils devraient être avant la fonction .each() et seulement appelés une fois. Tout commence avec la classe et est supprimé lorsque chaque test échoue. Je ne sais pas si c'est la meilleure façon, mais ça fonctionne.

.on('drag', function(el){ 
    $('.memberlist').each(function(){ 
     var persongender = $(el).attr("data-gender"); 
     var personage = $(el).attr("data-age"); 
     var persongrade = $(el).attr("data-grade"); 
     var testpassed = 'yes' 


     //Gender Filter Test 
     if(testpassed == 'yes' && $(this).data('gender') !== undefined && $(this).data('gender') !== null) { 
      if(persongender == $(this).data('gender')){ 
       $(this).addClass("dragzone",100); 
       } 
      else { 
       $(this).removeClass("dragzone",1); 
       testpassed = 'no'; 
      } 
      } 
     //Age Filter Test 
     if(testpassed == 'yes' && $(this).data('agestart') !== undefined && $(this).data('agestart') !== null) { 
      if ($(this).data('agestart') <= personage && personage <= $(this).data('ageend')) { 
       $(this).addClass("dragzone",100); 
      } 
      else { 
       $(this).removeClass("dragzone",1); 
       testpassed = 'no'; 
      } 
     } 
     //Grade Filter Test 
     if(testpassed == 'yes' && $(this).data('gradestart') !== undefined && $(this).data('gradeend') !== null && $(this).data('gradeend') !== undefined && $(this).data('gradeend') !== null) { 
      if ($(this).data('gradeend') <= persongrade && persongrade <= $(this).data('gradestart')) { 
       $(this).addClass("dragzone",100); 
      } 
      else { 
       $(this).removeClass("dragzone",1); 
       testpassed = 'no'; 
      } 
     } 
    }); 
});