CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Cananau Cristian
Cananau Cristian

Reputation: 456

Jquery draggable, check div content after drag

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>

Upvotes: 2

Views: 896

Answers (2)

Nandita Sharma
Nandita Sharma

Reputation: 13407

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>

Upvotes: 1

Bhumi Shah
Bhumi Shah

Reputation: 9476

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.

Upvotes: 1

Related Questions