dragzone에 대한 복잡한 논리적 테스트 dropzone 속성에 대해 드래그 된 항목을 테스트합니다.

Question

컨테이너에 div 목록이 있습니다. 나는 이미 드래그 람을 설치하고 일하고있다. 각 div에는 데이터 연령대, 데이터 성별, 데이터 등급 등의 데이터 속성이 있습니다. 모든 div가 모든 속성을 가지는 것은 아닙니다. 드롭 존에 대한

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

내가 일부가 된 div가/다음 데이터의 모든/아무도 속성 없습니다 : 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> 

, 내가 말할 수 없습니다.

그룹에있는 필터로 테스트를 설정하고 일치하는 사람 데이터 특성을 테스트를 통해 실행하고 실패한 경우 실패하는 .on('drag',function(source){})을 만들려고합니다.

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 

불행히도 나는 어디에서 시작할지를 알기 위해 내 머리를 감쌀 수 없습니다.

Answer 1

이것은 내가 생각해 낼 수있는 최선의 방법이지만 각 그룹의 변수를 확인하고 .each() 함수 앞에 있어야하며 한 번만 호출해야합니다. 모든 것은 클래스에서 시작하여 각 테스트가 실패 할 때 제거됩니다. 이것이 최선의 방법인지는 모르겠지만 작동합니다.

.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'; 
      } 
     } 
    }); 
});