Latest web development tutorials

jQuery UI ejemplo - arrastre (Arrastrable)

Permitiendo que el ratón para mover el elemento.

Para más detalles acerca de la interacción que pueden arrastrarse, consulte la documentación de la API puede arrastrar y soltar widgets (la que se pueden arrastrar el widget) .

La función predeterminada

Activar la función que pueden arrastrarse en cualquier elemento DOM. Haciendo clic y arrastrando el ratón en la ventana gráfica para mover el objeto arrastrable.

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> jQuery UI arrastre (Arrastrable) - La función por defecto </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  #draggable {width: 150px; altura: 150px; padding: 0.5em;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable") .draggable ();
  });
  </ Script>
</ Head>
<Cuerpo>
 
<Div id = "arrastrable" class = "ui-Reproductor-content">
  <P> Por favor, arrastre mí! </ P>
</ Div>
 
 
</ Body>
</ Html>

El desplazamiento automático

el desplazamiento automático por el documento cuando el arrastrable se trasladaron fuera de la ventana gráfica. Ajuste el scroll opción en true para habilitar el desplazamiento automático, puesta a punto, la velocidad de desplazamiento cuando se desplace por el gatillo scrollSensitivity y scrollSpeed configuración de las opciones.

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> jQuery UI arrastre (Arrastrable) - El desplazamiento automático </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  #draggable, draggable2 #, # draggable3 {width: 100px; altura: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable") .draggable ({Rollo: true});
    $ ( "# Draggable2") .draggable ({desplazamiento: true, scrollSensitivity: 100});
    $ ( "# Draggable3") .draggable ({desplazamiento: true, Scrollspeed: 100});
  });
  </ Script>
</ Head>
<Cuerpo>
 
<Div id = "arrastrable" class = "ui-Reproductor-content">
  <P> desplazamiento se establece en true, el valor predeterminado </ p>
</ Div>
 
<Div id = "draggable2" class = "ui-Reproductor-content">
  <P> scrollSensitivity a 100 </ p>
</ Div>
 
<Div id = "draggable3" class = "ui-Reproductor-content">
  <P> Scrollspeed a 100 </ p>
</ Div>
 
<Div style = "altura: 5.000 píxeles; anchura: 1px;"> </ div>
 
 
</ Body>
</ Html>

movimiento restringido

área Arrastrable definido por el límite para restringir el movimiento de cada arrastrable. Conjunto axis opciones para limitar el camino que pueden arrastrarse para el eje X o eje Y, o containment opción para especificar un elemento DOM padre o un selector de jQuery, tales como 'documento.'.

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> jQuery UI arrastre (Arrastrable) - movimiento limitado </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  .draggable {width: 90px; altura: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0;}
  #draggable, # draggable2 {margin-bottom: 20px;}
  #draggable {cursor: n-cambio de tamaño;}
  # Draggable2 {cursor: e-cambio de tamaño;}
  # Contención-wrapper {width: 95%; altura: 150px; border: 2px #ccc sólida; padding: 10px;}
  h3 {clear: left;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable") .draggable ({Eje: "y"});
    $ ( "# Draggable2") .draggable ({ejes: "x"});
 
    $ ( "# Draggable3") .draggable ({contención: "# contención envoltorio", desplace: false});
    $ ( "# Draggable5") .draggable ({contención: "padre"});
  });
  </ Script>
</ Head>
<Cuerpo>
 
<H3> movimiento a lo largo del eje de restricción: </ h3>
 
<Div id = clase "arrastrable" = "ui-widget de contenido que pueden arrastrarse">
  <P> Sólo arrastre verticales </ p>
</ Div>
 
<Div id = clase "draggable2" = "ui-widget de contenido que pueden arrastrarse">
  <P> Sólo arrastre horizontal </ p>
</ Div>
 
<H3> o movimiento limitado en otro elemento DOM: </ h3>
<Div id = "contención-wrapper">
  <Div id = clase "draggable3" = "ui-widget de contenido que pueden arrastrarse">
    <P> Me vi obligado en una caja </ p>
  </ Div>
 
  <Div class = "ui-widget de contenido que pueden arrastrarse">
    <P id = "draggable5" class = "ui-Reproductor-header"> me confinaron dentro del elemento padre </ p>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>

Estilo del cursor

Al arrastrar el objeto de posicionar el cursor. Por defecto, el cursor se encuentra en el medio arrastró objeto. Utilice cursorAt opción para especificar la posición con respecto al otro (especificado con respecto a un valor de píxel superior, derecha, abajo, izquierda) de la que pueden arrastrarse. Al proporcionar un valor del cursor CSS válido con los cursor opciones para personalizar el aspecto del cursor. los valores de cursor CSS válidos son: por defecto, mover el puntero, en forma de cruz, y así sucesivamente.

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> jQuery UI arrastre (Arrastrable) - Estilo del cursor </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  #draggable, draggable2 #, # draggable3 {width: 100px; altura: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable") .draggable ({Cursor: "movimiento", cursorAt: {top: 56, dejó: 56}});
    $ ( "# Draggable2") .draggable ({cursor: "punto de mira", cursorAt: {top: -5, dejó: -5}});
    $ ( "# Draggable3") .draggable ({cursorAt: {inferior: 0}});
  });
  </ Script>
</ Head>
<Cuerpo>
 
<Div id = "arrastrable" class = "ui-Reproductor-content">
  <P> Siempre estoy en el medio (en relación con el ratón) </ p>
</ Div>
 
<Div id = "draggable2" class = "ui-Reproductor-content">
  <P> Mi cursor está -5 izquierda y de arriba -5 </ p>
</ Div>
 
<Div id = "draggable3" class = "ui-Reproductor-content">
  <P> Mi única controlar la posición del cursor valores 'inferiores' </ p>
</ Div>
 
 
</ Body>
</ Html>

inicio diferido

Por delay milisegundos de retardo comienza a arrastrar la configuración de opciones. Por distance opción es presionado y arrastra el cursor al elemento de imagen, antes de permitir arrastrar y soltar.

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> jQuery UI arrastre (Arrastrable) - comienzo retrasado </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  #draggable, # draggable2 {width: 120px; altura: 120px; padding: 0.5em; float: left; margin: 0 10px 10px 0;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable") .draggable ({Distancia: 20});
    $ ( "# Draggable2") .draggable ({retraso: 1000});
    $ ( ".ui-Arrastrable") .disableSelection ();
  });
  </ Script>
</ Head>
<Cuerpo>
 
<Div id = "arrastrable" class = "ui-Reproductor-content">
  <P> Sólo cuando arrastro un pixel 20, y empecé a arrastrar </ p>
</ Div>
 
<Div id = "draggable2" class = "ui-Reproductor-content">
  Después <p> No importa la cantidad de distancia que tiene que arrastrar y arrastrar comenzó a esperar a 1000 ms </ p>
</ Div>
 
 
</ Body>
</ Html>

evento

que pueden arrastrarse en el start , drag y stop eventos. Arrastrando la activación de inicio start caso, provocada durante la fricción drag caso, desencadenado cuando el arrastre parada stop evento.

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> jQuery UI arrastre (Arrastrable) - Eventos </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  #draggable {width: 16em; padding: 0 1 em;}
  #draggable ul li {margin: 1 em 0; padding: 0.5em 0;} * html ul li {#draggable altura: 1%;}
  #draggable ul li-span.ui icono {float: left;}
  #draggable span.count ul li {font-weight: bold;}
  </ Style>
  <Script>
  $ (Function () {
    var $ start_counter = $ ( "# evento de inicio"),
      $ Drag_counter = $ ( "# evento de arrastre"),
      $ Stop_counter = $ ( "# evento de parada"),
      recuentos = [0, 0, 0];
 
    $ ( "#draggable") .draggable ({
      empezar: function () {
        conteos [0] ++;
        updateCounterStatus ($ start_counter, los recuentos de [0]);
      },
      arrastre: function () {
        conteos [1] ++;
        updateCounterStatus ($ drag_counter, los recuentos de [1]);
      },
      detener: function () {
        los recuentos de [2] ++;
        updateCounterStatus ($ stop_counter, los recuentos de [2]);
      }
    });
 
    updateCounterStatus funcionar ($ event_counter, NEW_COUNT) {
      // Actualización primer estado visual ...
      if (! $ event_counter.hasClass ( "Estado-ui-hover")) {
        $ Event_counter.addClass ( "Estado-ui-hover")
          .siblings. () removeClass ( "Estado-ui-hover");
      }
      // ... A continuación, actualizar los números $ ( "span.count", $ event_counter) .text (NEW_COUNT);
    }
  });
  </ Script>
</ Head>
<Cuerpo>
 
<Div id = "arrastrable" class = "ui-ui-widget de widget de contenido">
 
  <P> Por favor, arrastre, lo que provocó una cadena de acontecimientos. </ P>
 
  <Ul class = "ui-helper-reset">
    <Li id = "evento de inicio" class = "ui-estado predeterminado de ui-esquina-all"> <span class = "ui-icon ui-icon-play"> </ span> "Inicio" se llama <span class = "recuento"> 0 </ span> x </ li>
    <Li id = clase "evento de arrastre" = "ui-estado predeterminado de ui-esquina-all"> <span class = "ui-icon ui-icon-flecha-4"> </ span> "arrastre" se llama <span class = "recuento"> 0 </ span> x </ li>
    <Li id = "evento-stop" class = "ui-estado predeterminado de ui-esquina-all"> <span class = "ui-icon ui-icon-stop"> </ span> "stop" se llama <span class = "recuento"> 0 </ span> x </ li>
  </ Ul>
</ Div>
 
 
</ Body>
</ Html>

manijas

Se permite únicamente cuando la parte cursor especificado arrastre en arrastrable. Utilice handle opción para especificar el elemento (o grupo de elementos) del selector jQuery para el objeto arrastrado.

O prevenir el arrastre cuando el cursor está sobre un elemento específico (o grupo de elementos) en el que pueden arrastrarse. Use la opción de cancelar para especificar un selector de jQuery sobre el que "cancelar" la funcionalidad que pueden arrastrarse.

O cuando el elemento especificado cursor (o grupo de elementos) dentro del arrastre permitido que pueden arrastrarse. Utilice handle opción para especificar cancelar el selector de jQuery función de arrastre.

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> jQuery UI arrastre (Arrastrable) - Mangos </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  #draggable, # draggable2 {width: 100px; altura: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0;}
  p #draggable {cursor: movimiento;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable") .draggable ({Manija: "p"});
    $ ( "# Draggable2") .draggable ({cancelar: "p.ui-Reproductor-header"});
    $ ( "Div, p") .disableSelection ();
  });
  </ Script>
</ Head>
<Cuerpo>
 
<Div id = "arrastrable" class = "ui-Reproductor-content">
  <P class = "ui-Reproductor-header"> Sólo se pueden arrastrar y soltar dentro de este intervalo I </ p>
</ Div>
 
<Div id = "draggable2" class = "ui-Reproductor-content">
  <P> Me puede tomar alrededor de arrastrar y hellip; </ p>
  <P class = "ui-Reproductor-header"> & hellip; pero no me </ p> Puede arrastrar En este rango
</ Div>
 
 
</ Body>
</ Html>

Ubicación de la restauración

Al igual que con valores booleanos revert cuando la opción se puede arrastrar para detener el arrastre, que pueden arrastrarse de regreso (o su ayudante) a la ubicación original.

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> jQuery UI arrastre (Arrastrable) - Restaurar Localización </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  #draggable, # draggable2 {width: 100px; altura: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable") .draggable ({Revert: true});
    $ ( "# Draggable2") .draggable ({revertir: verdadera, ayudante: "clon"});
  });
  </ Script>
</ Head>
<Cuerpo>
 
<Div id = "arrastrable" class = "ui-Reproductor-content">
  <P> Restablecer </ p>
</ Div>
 
<Div id = "draggable2" class = "ui-Reproductor-content">
  <P> Restaurar Asistente </ p>
</ Div>
 
 
</ Body>
</ Html>

Forzado a los elementos de la red o

Alinear elementos DOM fronteras internas o externas que pueden arrastrarse. El uso de snap , snapMode (interior, exterior, ambos) y snapTolerance (al llamar alineado con la distancia entre los elementos que pueden arrastrarse en píxeles) opción.

Alinear a la cuadrícula o pueda arrastrar. Por grid opción de tamaño para ajustar las celdas de la cuadrícula (píxeles de altura o anchura).

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> jQuery UI arrastre (Arrastrable) - Alinear con elementos de la red o </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  .draggable {width: 90px; altura: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em;}
  .ui-Reproductor-p cabecera, .ui-widget de contenido p {margin: 0;}
  #snaptarget {height: 140px;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable") .draggable ({Snap: true});
    $ ( "# Draggable2") .draggable ({complemento: "en widgets .ui-header"});
    $ ( "# Draggable3") .draggable ({complemento: "en widgets .ui-header", snapMode: "externa"});
    $ ( "# Draggable4") .draggable ({cuadrícula: [20, 20]});
    $ ( "# Draggable5") .draggable ({cuadrícula: [80, 80]});
  });
  </ Script>
</ Head>
<Cuerpo>
 
<Div id = "snaptarget" class = "ui-Reproductor-header">
  <P> Soy un objetivo alineados </ p>
</ Div>
 
style="clear:both"> <br
 
<Div id = clase "arrastrable" = "ui-widget de contenido que pueden arrastrarse">
  <P> Por defecto (SNAP: true), alineado con el resto de elementos que pueden arrastrarse </ p>
</ Div>
 
<Div id = clase "draggable2" = "ui-widget de contenido que pueden arrastrarse">
  <P> Yo sólo alineado a la caja grande </ p>
</ Div>
 
<Div id = clase "draggable3" = "ui-widget de contenido que pueden arrastrarse">
  <P> acabo alineado con el borde exterior de la caja grande </ p>
</ Div>
 
<Div id = clase "draggable4" = "ui-widget de contenido que pueden arrastrarse">
  <P> Me alineado a una cuadrícula de 20 x 20 </ p>
</ Div>
 
<Div id = clase "draggable5" = "ui-widget de contenido que pueden arrastrarse">
  <P> Me alineado a una cuadrícula de 80 x 80 </ p>
</ Div>
 
 
</ Body>
</ Html>

La retroalimentación visual

Proporcionar información al usuario, como asistente de la forma arrastró objetos. helper opción acepta los valores originales '' (con los objetos que se pueden arrastrar cursor), 'clon' (con la copia se puede arrastrar el cursor), o una función devuelve el elemento DOM (el elemento durante un movimiento del cursor por la pantalla). Por opacity opción controla asistente de transparencia.

Para distinguir que es una arrastrable es arrastrado, dejar que se pueda arrastrar en movimiento para mantener la parte delantera. Si está arrastrando, utilizando zIndex opción para establecer la altura del asistente z-index, o utilice la stack opción para garantizar que cuando se deja de arrastrar, el último elemento que se arrastra siempre aparece en la parte superior del grupo con otros proyectos.

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> jQuery UI arrastre (Arrastrable) - retroalimentación visual </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  #draggable, draggable2 #, # draggable3, #set div {width: 90px; altura: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0;}
  #draggable, draggable2 #, # draggable3 {margin-bottom: 20px;}
  #set {clear: both; float: left; ancho: 368px; altura: 120px;}
  p {clear: both; margin: 0; padding: 1 em 0;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#draggable") .draggable ({Ayudante: "original"});
    $ ( "# Draggable2") .draggable ({opacidad: 0,7, ayudante: "clon"});
    $ ( "# Draggable3") .draggable ({
      cursor: "mover",
      cursorAt: {top: -12, dejó: -20},
      ayudante: function (event) {
        devolver $ ( "<div class =" ui-Reproductor-header '> yo soy un ayudante de encargo </ div> ");
      }
    });
    $ ( "#set Div") .draggable ({apilar: "div #set"});
  });
  </ Script>
</ Head>
<Cuerpo>
 
<H3 class = "docs"> helper: </ h3>
 
<Div id = "arrastrable" class = "ui-Reproductor-content">
  <P> ORIGINAL </ p>
</ Div>
 
<Div id = "draggable2" class = "ui-Reproductor-content">
  <P> translúcida clon </ p>
</ Div>
 
<Div id = "draggable3" class = "ui-Reproductor-content">
  <P> asistente personalizado (en conjunción con cursorAt) </ p>
</ Div>
 
<H3 class = "docs"> pila: </ h3>
<Div id = "set">
  <Div class = "ui-Reproductor-content">
    <P> Estamos draggables .. </ p>
  </ Div>
 
  <Div class = "ui-Reproductor-content">
    <P> .. es z-index se controla automáticamente .. </ p>
  </ Div>
 
  <Div class = "ui-Reproductor-content">
    <P> .. con unas opciones de pila. </ P>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>

jQuery UI Arrastrable + Sortable

Se pueden arrastrar y Sortable de interacción sin fisuras.

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> jQuery UI arrastre (Arrastrable) + Ordenar (Asc) </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  ul {list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px;}
  li {margin: 5px; padding: 5px; ancho: 150px;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#sortable") .sortable ({
      revertirá: true
    });
    $ ( "#draggable") .draggable ({
      connectToSortable: "#sortable",
      ayudante: "clon",
      volver: "no válido"
    });
    $ ( "UL, li") .disableSelection ();
  });
  </ Script>
</ Head>
<Cuerpo>
 
<Ul>
  <Li id = "arrastrable" class = "ui-estado-highlight"> Por favor, arrastrar me </ li>
</ Ul>
 
<Ul id = "ordenable">
  <Li class = "ui-estado-default"> Artículo 1 </ li>
  <Li class = "ui-estado-default"> Artículo 2 </ li>
  <Li class = "ui-estado-default"> Artículo 3 </ li>
  <Li class = "ui-estado-default"> Artículo 4 </ li>
  <Li class = "ui-estado-default"> Artículo 5 </ li>
</ Ul>
 
 
</ Body>
</ Html>