对拖动进行复杂的逻辑测试,以针对dropzone属性测试拖动的项目

时间:2017-10-07 01:59:01

标签: javascript jquery html logic conditional

我有一个容器中的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>

对于Drop区域,我的div也具有以下数据属性中的一些/全部/全部:data-genderdata-gradestartdata-gradenddata-agestart,{{1 }}

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){})

不幸的是,我无法解决这个问题,知道从哪里开始。

1 个答案:

答案 0 :(得分:0)

这是我能够提出的最好的,但它检查每个组的变量,它们应该在.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';
            }
        }
    });
});