demo.js

(function($) {


    $( "#sortable" ).sortable({
      placeholder: "portlet-placeholder ui-corner-all",
      revert: true
    });
    $( ".draggable" ).draggable({
      connectToSortable: "#sortable",
      helper: "clone",
      revert: "invalid"


    });

  $('.working-wrapper').css({'width': '100%', 'height': 'auto'});

   $(document).on('click','.action-remove', function(){
        $(this).closest('.working-wrapper').remove();
   });

   $(document).ready(function(){

      $('#test_layout').on('click', function(){
        var clonable = $('#test_layout2').html();
        $('#test_layout3').append(clonable);
      });


   });
   var   customeHtml = 0;

   $('.working-customizer').on('keyup','#coloum-generator',function(){
       var generatorInput,
           generatorResul=0,
           generatorSum=0;

           generatorInput = $(this).val();
           generatorResult = generatorInput.split('-');

           for(var i=0;i<generatorResult.length;i++){
            generatorSum  += parseInt(generatorResult[i]);
          }

             if(generatorSum == 12){
                    ///////// Grid Generator /////////
                    customeHtml   = ' <div class="working-wrapper draggable" >';
                    customeHtml  += ' <a href="#close" class="action-remove btn btn-danger">X Remove</a>';
                    customeHtml  += '<div class="working-field">';
                    customeHtml  += '<div class="row clearfix">';
                    for(var i=0;i<generatorResult.length;i++){
                    customeHtml  += '<div class="col-md-'+generatorResult[i]+' dragable-column"></div>';
                    }
                    customeHtml  += '</div>';
                    customeHtml  += '</div>';
                    customeHtml  += '</div>';
                  
                    ///////// Button Add /////////
                   if(!$('#invisible_btn').hasClass()){
                    $('#invisible_btn').removeClass("invisible_btn_none");
                    }
                 
                 }else {

                      ///////// Button Remove /////////
                       if(!$('#invisible_btn').hasClass()){
                         $('#invisible_btn').addClass("invisible_btn_none");
                        }
                    }
             });
             
             ///////// Button For appending grid /////////
             $('#invisible_btn').on('click', function(){
                      $('.content_layout').append(customeHtml);
              });
       


               $(".working-container").on("click",".dragable-column",function(){

                   $(".sidebar").hide(500);
                   $(".right_sidebar").show(500);
                   $(this).addClass("myCustomClass");
                   var appendableNumber = $(this).attr("class");
                   var strArray = appendableNumber.match(/(\d+)/g);
                   $(this).closest('#bootstrab_builder').find("#updatable-input").val(strArray);
     
               });

               $("#updatable-input").on("keyup",function(){
                  $(this). 
               });



               $('.action-hide').on('click',function(){
                   $(".sidebar").show(500);
                   $(".right_sidebar").hide(500);
               });

      /*            var str = 'col-md-3';
                  var strArray = str.match(/(\d+)/g);
                  alert(strArray);*/


})(jQuery);



/*     $('.working-customizer').on('keyup','#coloum-generator',function(){
     var generatorInput,
         generatorResul=0,
         generatorSum=0;

          generatorInput = $(this).val();
          generatorResult = generatorInput.split('-');

          for(var i=0;i<generatorResult.length;i++){
            generatorSum  += parseInt(generatorResult[i]);
          }

             if(generatorSum == 12){
                var customeHtml;
                    customeHtml   = ' <div class="working-wrapper draggable" >';
                    customeHtml  += ' <a href="#close" class="action-remove btn btn-danger">X Remove</a>';
                    customeHtml  += '<div class="working-field">';
                    customeHtml  += '<div class="row clearfix">';
               for(var i=0;i<generatorResult.length;i++){
                    customeHtml  += '<div class="col-md-'+generatorResult[i]+' dragable-column"></div>';
                    }
                    customeHtml  += '</div>';
                    customeHtml  += '</div>';
                    customeHtml  += '</div>';
               
                 $('#invisible_btn').removeClass(" invisible_btn_none");

            

            $('#invisible_btn').on('click', function(){
              // alert(customeHtml);


             $('.content_layout').append(customeHtml);
            
           

            });



     }else {
          $('#invisible_btn').addClass(" invisible_btn_none");


     }



 });
*/