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

Question

我有两组div第一组和第二组。当我拖动＃34;＃container＆＃34;中的所有div时我应该删除组名。我试着检查Stopevent上div的长度，但它向我展示了相同的内容。我每次都有不同数量的div，因为我从数据库中获取它。有人可以帮我吗？

＆＃13;

＆＃13;

$(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); 
 
        },
    }); 
});

});

＆＃13;

#container{
    
    height: 750px;
    border: 5px ridge #292929; 

    }


.box {
    background:green;
    cursor:move;
    top: 780px;


    }  

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

检查这样的remianing元素的长度

        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();
    }

＆＃13;

＆＃13;

$(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();
        }

      },
    });
  });

});

＆＃13;

#container {
  height: 750px;
  border: 5px ridge #292929;
}

.box {
  background: green;
  cursor: move;
  top: 780px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以这样做：https://codepen.io/creativedev/pen/ERmKVR

在停止时更改了代码：

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();
     }

 },

拖动项目后，添加了类：

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

在HTML中添加了ID来识别div。你可以在demo中看到。