SCR27Reordenar secciones de la página mediante el Document Object Model

Este ejemplo reordena hacia arriba y hacia abajo. Este enfoque también puede usarse para una reordenación bidimensional añadiendo las opciones izquierda y derecha.

Los componentes de este ejemplo son elementos de una lista sin ordenar. Las listas sin ordenar son un modelo semántico muy adecuado para conjuntos de elementos similares, como estos componentes. El enfoque del menú también puede usarse para otros tipos de agrupaciones.

Los módulos son elementos de lista, y cada módulo, además del contenido en elementos div, contiene un menú representado como una lista anidada.

<ul id="swapper">
    <li id="black">
      <div class="module">
        <div class="module_header">
          <!-- menu link -->
          <a href="#" onclick="ToggleMenu(event);">menu</a>
          <!-- menu -->
          <ul class="menu">
            <li><a href="#" onclick="OnMenuClick(event)" 
              onkeypress="OnMenuKeypress(event);">up</a></li>
            <li><a href="#" onclick="OnMenuClick(event)" 
              onkeypress="OnMenuKeypress(event);">down</a></li>
          </ul>
        </div>
      <div class="module_body">
        Text in the black module
      </div>
    </div>
  </li>
  ...
</ul>

Puesto que ya hemos tratado cómo mostrar y ocultar menús en los ejemplos del árbol sencillo, aquí nos centraremos únicamente en el código que intercambia los módulos. Una vez que armonizamos los eventos y cancelamos la acción predeterminada del enlace, nos ponemos a trabajar. Primero, definimos una serie de variables locales para los elementos con los que vamos a trabajar: el menú, el módulo que se va a reordenar y el enlace del menú (menuLink). Después, tras comprobar la dirección de la reordenación, intentamos obtener el nodo con el que intercambiar. Si lo encontramos, llamamos a swapNode() para intercambiar nuestros dos módulos y a PositionElement() para mover el menú, posicionado de forma absoluta, junto con el módulo, y a continuación devolvemos el foco al elemento del menú que puso todo en marcha.

function MoveNode(evt,dir){
  HarmonizeEvent(evt);
  evt.preventDefault();
  var src = evt.target;
  var menu = src.parentNode.parentNode;
  var module = menu.parentNode.parentNode.parentNode;
  var menuLink = module.getElementsByTagName("a")[0];
  var swap = null;
  switch(dir){
    case 'up': {
      swap = module.previousSibling;
      while (swap && swap.nodeType != 1){
        swap = swap.previousSibling;
      }
        break;
    }
    case 'down': {
      swap = module.nextSibling;
      while (swap && swap.nodeType != 1){
        swap = swap.nextSibling;
      }
        break;
    }
  }
  if (swap && swap.tagName == node.tagName){
    module.swapNode(swap);
    PositionElement(menu,menuLink,false,true);
  }
  src.focus();
}

El CSS para el intercambio de nodos no difiere mucho del de nuestros ejemplos anteriores del árbol, con algunos ajustes de tamaño y color para los módulos y el pequeño menú.

ul#swapper {
  list-item-style:none;
  margin:0px;
  padding:0px;
}
ul#swapper li {
  border:1px solid black;
  height:5em;
  list-style:none;
  margin:1em;
  padding:0;
  width:15em;
}
ul#swapper li a {
  color:white;
  font-size:90%;
  text-decoration:none;
}
ul#swapper li div.module_header {
  padding:0 0.2em;
  text-align:right;
}
ul#swapper li div.module_body {
  padding:0.2em;
}
ul#swapper ul.menu {
  background-color:#eeeeee; 
  border:1px solid gray;
  display:none;
  height:auto;
  list-style:none;
  margin:0;
  padding:0;
  position:absolute;
  text-align:left;
}
ul#swapper ul.menu li {
  border:none;
  font-weight:normal;
  height:auto;
  margin:0;
  text-align:left;
  width:5em;
}
ul#swapper ul.menu li a {
  color:black;
  display:block;
  padding:0 0.1em;
  text-decoration:none;
  width:100%;
}