r2c/user/themes/r2c/js/site.js

function wrap(){
  $('#start > div:nth-child(-n+3)').wrapAll('<div class="top"></div> ')
  $('#start > div:nth-child(n+2)').wrapAll('<div class="bottom"></div> ')
};

function resize() {
  $(window).on("load resize", function() {
    $("#recits").resizable();
    // $( "#reseaux-sociaux" ).resizable();
  });
}

function drag() {

  var $hand = $( ".handler" );

  $hand.draggable({
    drag: function(){
      var offset = $(this).offset();
      var xPos = offset.left;
      var yPos = offset.top;
      $('#posX').text('x: ' + xPos);
      $('#posY').text('y: ' + yPos);
      console.log(yPos);

      var $recits = $(this).parent('#page').find('#recits');
      var $itw = $(this).parent('#page').find("#interviews");
      var $links = $(this).parent('#page').find("#links");
      var $rs = $(this).parent('#page').find("#reseaux-sociaux");

      var $grid1 = $(this).parent('.top');
      var $grid2 = $(this).parent('.bottom');

      $grid1.css('griqd-template-columns', xPos + 'auto auto' );
      $grid2.css('grid-template-columns', xPos + 'auto auto' );

      $recits.css('width', xPos);
      $rs.css('width', xPos);
      $recits.css('height', yPos);
      $itw.css('height', yPos);
      $links.css('height', yPos);
    }
  });
};

$(document).ready(function() {
  wrap();
  drag();
  // resize();
});