jQuery可拖动，拖动后检查div内容

Question

I have 2 Groups of divs First and Second Group. When i drag all divs inside of "#container" i should to remove the Name of Group. I tryed to check the length of div on Stopevent but it show me the same content. I have every time different number of divs bcause i'm getting it from database. Can someone help me with that?

 $(document).ready(function() { $('.box').each(function() { $('.box').resizable({ containment: '#container', stop: function(){ } , }); }); $('.box').each(function() { $(".box").draggable({ revert: 'valid', containment: '#container', drag: function() { var top = $(this).offset().top; var left = $(this).offset().left; $("#top").html(top); $("#left").html(left); }, stop: function(){ $(this).css({position:'absolute'}); alert($('.check').nextAll().length); alert($('.check1').nextUntil('.check').length); }, }); }); }); 

 #container{ height: 750px; border: 5px ridge #292929; } .box { background:green; cursor:move; top: 780px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script> <div class="row"> <div id="container" class="col-xs-12"> <div class="col-xs-12 check1" style="padding-left: 0px;"> <p style="position:relative;top: 780px;">First Group of Divs</p></div> <div id="id3" class="box" style="position:relative;top:780px; width:100px; height:75px;"> <p id="top"></p> <p id="left"></p> <p id="height"></p> <p id="width"></p> </div> <div id="id4" class="box" style="position:relative;top:780px; width:100px; height:75px;"> <p id="top"></p> <p id="left"></p> <p id="height"></p> <p id="width"></p> </div> <div class="col-xs-12 check" style="padding-left: 0px;"> <p style="position:relative;top: 780px;">Second Group of Divs</p></div> <div id="id1" class="box" style="position:relative;top:780px; width:100px; height:75px;"> <p id="top"></p> <p id="left"></p> <p id="height"></p> <p id="width"></p> </div> <div id="id2" class="box" style="position:relative;top:780px; width:100px; height:75px;"> <p id="top"></p> <p id="left"></p> <p id="height"></p> <p id="width"></p> </div> </div> </div> 

Answer 1

Check the length of remianing elements like this

        var a=0, b=0;
    $('.check .ui-draggable').each(function() {
       if($(this).css("position") == "relative") {
          a++;
        }
    })
    if (a===0) {
       $(".group2").hide();
    }
     $('.check1 .ui-draggable').each(function() {
       if($(this).css("position") == "relative") {
          b++;
        }
    })
    if (b===0) {
       $(".group1").hide();
    }

 $(document).ready(function() { $('.box').each(function() { $('.box').resizable({ containment: '#container', stop: function() { }, }); }); $('.box').each(function() { $(".box").draggable({ revert: 'valid', containment: '#container', drag: function() { var top = $(this).offset().top; var left = $(this).offset().left; $("#top").html(top); $("#left").html(left); }, stop: function() { $(this).css({ position: 'absolute' }); var a=0, b=0; $('.check .ui-draggable').each(function() { if($(this).css("position") == "relative") { a++; } }) if (a===0) { $(".group2").hide(); } $('.check1 .ui-draggable').each(function() { if($(this).css("position") == "relative") { b++; } }) if (b===0) { $(".group1").hide(); } }, }); }); }); 

 #container { height: 750px; border: 5px ridge #292929; } .box { background: green; cursor: move; top: 780px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script> <div class="row"> <div id="container" class="col-xs-12"> <div class="col-xs-12 check1" style="padding-left: 0px;"> <p class="group1" style="position:relative;top: 780px;">First Group of Divs</p> <div id="id" class="box" style="position:relative;top:780px; width:100px; height:75px;"> <p id="top"></p> <p id="left"></p> <p id="height"></p> <p id="width"></p> </div> <div id="id" class="box" style="position:relative;top:780px; width:100px; height:75px;"> <p id="top"></p> <p id="left"></p> <p id="height"></p> <p id="width"></p> </div> </div> <div class="col-xs-12 check" style="padding-left: 0px;"> <p class="group2" style="position:relative;top: 780px;">Second Group of Divs</p> <div id="id" class="box" style="position:relative;top:780px; width:100px; height:75px;"> <p id="top"></p> <p id="left"></p> <p id="height"></p> <p id="width"></p> </div> <div id="id" class="box" style="position:relative;top:780px; width:100px; height:75px;"> <p id="top"></p> <p id="left"></p> <p id="height"></p> <p id="width"></p> </div> </div> </div> </div> 

Answer 2

You can do it with this: https://codepen.io/creativedev/pen/ERmKVR

changed code in stop:

stop: function(){
     $(this).css({position:'absolute'});
     if($('#firstgroupdiv').nextUntil('#secondgroupdiv').not('.dropped').length == 0){
       $('#firstgroup').hide();
     }
     if($('#secondgroupdiv').nextUntil('#thirdgroupdiv').not('.dropped').length == 0){
       $('#secondgroup').hide();
     }

 },

After dragged item, added class:

drag: function() {
    var top = $(this).offset().top;
    var left = $(this).offset().left;
    $("#top").html(top);
    $("#left").html(left);
    $(this).addClass('dropped');
},

Added ids in HTML to identify divs. You can see in demo.