exhtml
4/20/2017 - 5:45 AM

Change layout / move elements on mediaquery change matchMedia() --- // Me quedé a mitad de hacer pruebas en este codepen: http://codepen.io/

Change layout / move elements on mediaquery change matchMedia() --- // Me quedé a mitad de hacer pruebas en este codepen: http://codepen.io/exhtml/pen/VaMyrV

/*

Me quedé a mitad de hacer pruebas en este codepen:
http://codepen.io/exhtml/pen/VaMyrV

*/


function cld_move_elem_on_mql(elem,wrapper) {
  //con esto movemos LOS CONTENIDOS del elemento que pasamos
  var getContent = $(elem).contents();
  $(getContent).detach().appendTo(wrapper);
  //con esto movemos TODO EL ELEMENTO
  //$(elem).detach().appendTo(wrapper);
}

function cld_mediaquery_changed(mq) {
  if (mq.matches) {
    //$('.lorem').detach().appendTo('.box-one');
    cld_move_elem_on_mql('.js-move-to-mobile-dropdown','.js-mobile-dropdown-wrapper');
  } else {
    //$('.lorem').detach().appendTo('.box-two')
	//cld_move_elem_on_mq('.element','.target2');

	//aqui habria que deshacer el movimiento no?
	//podriamos almacenar de alguna forma dinamicamente el parent
  }
}

if (matchMedia) {
  var mq = window.matchMedia("(max-width: 480px)");
  mq.addListener(cld_mediaquery_changed);
  cld_mediaquery_changed(mq);
}