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 scrollbar(){
  $(window).on("load",function(){
            $("#start > div > div").mCustomScrollbar({
                  axis:"y",
                  setTop: 0,
            });
        });
}

function clickhand(){
  $(".handler").on("mousedown", function (e) {
      e.preventDefault();
      $(this).addClass("mouseDown");
  }).on("mouseup", function () {
      $(this).removeClass("mouseDown");
  });
};

function drag() {

  var $hand1 = $( ".hand1" );
  var $hand2 = $( ".hand2" );

  $hand1.draggable({
    containment: "#start",
    scroll: false,
     // grid: [ 5, 5 ],
    drag: function(){
      // handler
        // dimension handler
        var $Hhand = $(this).outerHeight();
        var $Whand = $(this).outerWidth();
        // ajust handler
        var ajustH = $Hhand / 2;
        var ajustW = $Whand / 2;

        // position handler
        var offset = $(this).offset();
        var xPos = offset.left + ajustW;
        var yPos = offset.top - ajustH;

        var xPos2 = xPos + (ajustW * 2);
        var yPos2 = yPos + (ajustH * 2);

      // Blocs
        // top
        var $recits = $(this).parent('#page').find('#recits');
        var $itw = $(this).parent('#page').find("#interviews");
        var $img = $(this).parent('#page').find("#images");

        // bottom
        var $bottom = $(this).parent('#page').find(".bottom");

        var $links = $(this).parent('#page').find("#links");
        var $rs = $(this).parent('#page').find("#reseaux-sociaux");
        var $stmp = $(this).parent('#page').find("#streetmap");

        // dimension blocs
        var Dw0 = $(window).outerWidth(true);
        var Dw1 = $recits.outerWidth(true);
        var Dw2 = $itw.outerWidth(true);
        var Dw3 = $img.outerWidth(true);

        // var Bw1 = (Dw0 - (Dw2 + Dw3));
        var Bw2 = (Dw0 - (Dw1 + Dw3));
        var Bw3 = (Dw0 - (Dw1 + Dw2));
        var Bl3 = Dw1 + Dw2;
        // app dimension
        var $handler2 = $(this).parent().find('.hand2');

        $handler2.css({
          "top": yPos + 25,
          "left": xPos + Bw2 - 25,
        });

        $recits.css({
          "width": xPos,
          "height": yPos - 2,
        });
        $itw.css({
          "width": Bw2,
          "height": yPos - 2,
        });
        $img.css({
          // "width": '33%',
          "height": yPos - 2,
        });
        $bottom.css({
          "top": yPos2 + 2,
        })
        $links.css({
          "width": xPos,
          "top": yPos2 + 2,
        })
        $rs.css({
          "width": Bw2,
        });
        // $stmp.css({
        //   "width": '33%',
        // });
    }
  });

  $hand2.draggable({
    containment: "#start",
    scroll: false,
    drag: function(){
      // handler
        // dimension handler
        var $Hhand = $(this).outerHeight(true);
        var $Whand = $(this).outerWidth(true);
        // ajust handler
        var ajustH = $Hhand / 2;
        var ajustW = $Whand / 2;

        // position handler
        var offset = $(this).offset();
        var xPos = offset.left + ajustW;
        var yPos = offset.top - ajustH;

        var xPos2 = xPos + (ajustW * 2);
        var yPos2 = yPos + (ajustH * 2);

      // Blocs
        // top
        var $recits = $(this).parent('#page').find('#recits');
        var $itw = $(this).parent('#page').find("#interviews");
        var $img = $(this).parent('#page').find("#images");

        // bottom
        var $bottom = $(this).parent('#page').find(".bottom");

        var $links = $(this).parent('#page').find("#links");
        var $rs = $(this).parent('#page').find("#reseaux-sociaux");
        var $stmp = $(this).parent('#page').find("#streetmap");

        // dimension blocs
        var Dw0 = $(window).outerWidth(true);
        var Dw1 = $recits.outerWidth(true);
        var Dw2 = $itw.outerWidth(true);
        var Dw3 = $img.outerWidth(true);

        var xPos3 = Dw0 - xPos;
        // var Bw1 = (Dw0 - (Dw2 + Dw3));
        var Bw2 = (Dw0 - (Dw1 + Dw3));
        var Bw3 = (Dw0 - (Dw1 + Dw2));
        var Bl3 = Dw1 + Dw2;
        // app dimension
        var $handler1 = $(this).parent().find('.hand1');

        $handler1.css({
          "top": yPos + 25,
          "left": xPos  - Bw2 - 25,
        });

        $recits.css({
          // "width": xPos,
          "height": yPos - 2,
        });
        $itw.css({
          "width": Bw2,
          "height": yPos - 2,
        });
        $img.css({
          "width": xPos3,
          "height": yPos - 2,
        });
        $bottom.css({
          "top": yPos2 + 2,
        })
        $rs.css({
          "width": Bw2,
        });
        $stmp.css({
          "width": xPos3,
        });
    }
  });
};

$(document).ready(function() {
  wrap();
  scrollbar();
  clickhand();
  drag();
});