Latest web development tutorials

jQuery UI ejemplo - la clasificación (Asc)

Utilizar el ratón para ajustar la lista o cuadrícula elementos ordenados.

Para más detalles sobre la interacción ordenable, consulte la documentación de la API de widgets se pueden ordenar (que se pueden ordenar el widget) .

La función predeterminada

sortable función está habilitada en cualquier elemento DOM. Haga clic y arrastre el ratón a la lista de elementos de una nueva ubicación, otros artículos se ajustarán automáticamente. Por defecto, se puede ordenar cada entrada compartida draggable atributo.

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> jQuery UI clasificación (Asc) - 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>
  #sortable {-style-type lista: none; margin: 0; padding: 0; anchura: 60%;}
  #sortable li {margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; altura: 18px;}
  lapso #sortable li {position: absolute; margin-left: -1.3em;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#sortable") .sortable ();
    $ ( "#sortable") .disableSelection ();
  });
  </ Script>
</ Head>
<Cuerpo>
 
<Ul id = "ordenable">
  <Li class = "ui-estado-default"> <span class = "ui ui-icon-icono-arrowthick-2-n"> </ span> Artículo 1 </ li>
  <Li class = "ui-estado-default"> <span class = "ui ui-icon-icono-arrowthick-2-n"> </ span> Artículo 2 </ li>
  <Li class = "ui-estado-default"> <span class = "ui ui-icon-icono-arrowthick-2-n"> </ span> Artículo 3 </ li>
  <Li class = "ui-estado-default"> <span class = "ui ui-icon-icono-arrowthick-2-n"> </ span> Artículo 4 </ li>
  <Li class = "ui-estado-default"> <span class = "ui ui-icon-icono-arrowthick-2-n"> </ span> Artículo 5 </ li>
  <Li class = "ui-estado-default"> <span class = "ui ui-icon-icono-arrowthick-2-n"> </ span> Artículo 6 </ li>
  <Li class = "ui-estado-default"> <span class = "ui ui-icon-icono-arrowthick-2-n"> </ span> Artículo 7 </ li>
</ Ul>
 
 
</ Body>
</ Html>

Lista de conexiones

Por el connectWith pasando una opción de selección para poner una lista de los elementos en la lista ordenada a otra, y viceversa. La forma más fácil es con una lista de todos los grupos relevantes de una clase CSS, y luego pasar a la clase a la función ordenable (por ejemplo, connectWith: '.myclass' ).

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> jQuery UI clasificación (Asc) - lista de conexiones </ 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>
  # Sortable1, # {sortable2 de tipo list-style: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px;}
  # Sortable1 li, li {# sortable2 margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; ancho: 120px;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "# Sortable1, # sortable2") .sortable ({
      connectWith: ".connectedSortable"
    .}) DisableSelection ();
  });
  </ Script>
</ Head>
<Cuerpo>
 
<Id = clase "sortable1" Ul = "connectedSortable">
  <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>
 
<Id = clase "sortable2" Ul = "connectedSortable">
  <Li class = "ui-estado-highlight"> Artículo 1 </ li>
  <Li class = "ui-estado-highlight"> Artículo 2 </ li>
  <Li class = "ui-estado-highlight"> Artículo 3 </ li>
  <Li class = "ui-estado-highlight"> Artículo 4 </ li>
  <Li class = "ui-estado-highlight"> Artículo 5 </ li>
</ Ul>
 
 
</ Body>
</ Html>

pestaña Lista de conexiones

Al colocar la parte superior de los elementos de la lista de la ficha correspondiente para poner una lista de los elementos en la lista ordenada a otra, y viceversa.

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> jQuery UI clasificación (Asc) - lista de conexiones pestaña </ 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>
  # Sortable1 li, li {# sortable2 margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; ancho: 120px;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "# Sortable1, # sortable2") .sortable () disableSelection () .;
 
    var tabs $ = $ ( "") #tabs .tabs ();
 
    var $ tab_items = $ ( "UL: primera li", pestañas $) .droppable ({
      aceptar: "li .connectedSortable",
      hoverclass: "Estado-ui-vuelo estacionario",
      la gota: function (event, ui) {
        var $ item = $ (this);
        var $ list = $ ($ item.find ( "a") .attr ( "href"))
          .find ( ".connectedSortable");
 
        ui.draggable.hide ( "lento", function () {
          $ Tabs.tabs ( "opción", "activa", tab_items.index $ ($ item));
          $ (Este) .appendTo (lista $) .show ( "lento");
        });
      }
    });
  });
  </ Script>
</ Head>
<Cuerpo>
 
<div id = "pestañas">
  <Ul>
    <Li> <a href="#tabs-1"> Nunc tincidunt </a> </ li>
    <Li> <a href="#tabs-2"> Proin dolor </a> </ li>
  </ Ul>
  <div id = "pestañas-1">
    <Ul id = clase "sortable1" = "connectedSortable ui-helper-reset">
      <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>
  </ Div>
  <div id = "pestañas-2">
    <Ul id = clase "sortable2" = "connectedSortable ui-helper-reset">
      <Li class = "ui-estado-highlight"> Artículo 1 </ li>
      <Li class = "ui-estado-highlight"> Artículo 2 </ li>
      <Li class = "ui-estado-highlight"> Artículo 3 </ li>
      <Li class = "ui-estado-highlight"> Artículo 4 </ li>
      <Li class = "ui-estado-highlight"> Artículo 5 </ li>
    </ Ul>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>

inicio diferido

Retardada por el retardo de tiempo y la distancia para evitar especie accidental. Por delay milisegundos opción debe establecerse antes del inicio de la resistencia de la especie. Por distance píxeles opción debe establecerse antes del inicio de la resistencia de la especie.

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> jQuery UI clasificación (Asc) - 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>
  # Sortable1, # sortable2 {list-style-type: none; margin: 0; padding: 0; margin-bottom: 15px; zoom: 1;}
  # Sortable1 li, li {# sortable2 margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; anchura: 95%;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "# Sortable1") .sortable ({
      retraso: 300
    });
 
    $ ( "# Sortable2") .sortable ({
      distancia: 15
    });
 
    $ ( "Li") .disableSelection ();
  });
  </ Script>
</ Head>
<Cuerpo>
 
<H3 class = "docs"> 300 ms de retardo de tiempo: </ h3>
 
<Ul id = "sortable1">
  <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>
</ Ul>
 
<H3 class = "docs"> retardo de distancia 15px: </ h3>
 
<Ul id = "sortable2">
  <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>
</ Ul>
 
 
</ Body>
</ Html>

Se muestra como una cuadrícula

Deje que las entradas se pueden ordenar se muestran como una rejilla, para que utilicen CSS con las mismas dimensiones y la pantalla flotante.

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> jQuery UI clasificación (Asc) - mostrar una cuadrícula </ 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>
  #sortable {-style-type lista: none; margin: 0; padding: 0; ancho: 450px;}
  li #sortable {margin: 3px 3px 3px 0; padding: 1px; float: left; ancho: 100px; altura: 90px; font-size: 4em; text-align: center;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#sortable") .sortable ();
    $ ( "#sortable") .disableSelection ();
  });
  </ Script>
</ Head>
<Cuerpo>
 
<Ul id = "ordenable">
  <Li class = "ui-estado-default"> 1 </ li>
  <Li class = "ui-estado-default"> 2 </ li>
  <Li class = "ui-estado-default"> 3 </ li>
  <Li class = "ui-estado-default"> 4 </ li>
  <Li class = "ui-estado-default"> 5 </ li>
  <Li class = "ui-estado-default"> 6 </ li>
  <Li class = "ui-estado-default"> 7 </ li>
  <Li class = "ui-estado-default"> 8 </ li>
  <Li class = "ui-estado-default"> 9 </ li>
  <Li class = "ui-estado-default"> 10 </ li>
  <Li class = "ui-estado-default"> 11 </ li>
  <Li class = "ui-estado-default"> 12 </ li>
</ Ul>
 
 
</ Body>
</ Html>

Colocar un marcador de posición

Al arrastrar una entrada puede ordenar a una nueva ubicación, el resto de entradas permitirá la inserción de la entrada. Pregunta placeholder opción de transferencia para definir una clase de estilo visual en blanco. Los valores booleanos forcePlaceholderSize opción para establecer el tamaño del marcador de posición.

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> jQuery UI clasificación (Asc) - marcador de posición colocado </ 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>
  #sortable {-style-type lista: none; margin: 0; padding: 0; anchura: 60%;}
  #sortable li {margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; altura: 1.5em;}
  html> li #sortable cuerpo {height: 1.5em; line-height: 1.2em;}
  .ui-estado más destacado {height: 1.5em; line-height: 1.2em;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#sortable") .sortable ({
      marcador de posición: "ui-estado más destacado"
    });
    $ ( "#sortable") .disableSelection ();
  });
  </ Script>
</ Head>
<Cuerpo>
 
<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>
  <Li class = "ui-estado-default"> Artículo 6 </ li>
  <Li class = "ui-estado-default"> Artículo 7 </ li>
</ Ul>
 
 
</ Body>
</ Html>

Se crea la lista vacía

por Opción se establece false , para evitar una lista de todas las entradas se colocan en una lista vacía por separado. De forma predeterminada, las entradas se pueden ordenar pueden ser colocados en una lista vacía.

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> jQuery UI clasificación (Asc) - manipulación lista vacía </ 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>
  # Sortable1, sortable2 #, # {sortable3 de tipo list-style: none; margin: 0; padding: 0; float: left; margin-right: 10px; fondo: #eee; padding: 5px; ancho: 143px;}
  # Sortable1 li, li # sortable2, # sortable3 li {margin: 5px; padding: 5px; font-size: 1.2em; ancho: 120px;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "Ul.droptrue") .sortable ({
      connectWith: "ul"
    });
 
    $ ( "Ul.dropfalse") .sortable ({
      connectWith: "ul",
      dropOnEmpty: falsa
    });
 
    $ ( "# Sortable1, sortable2 #, # sortable3") .disableSelection ();
  });
  </ Script>
</ Head>
<Cuerpo>
 
<Id = "sortable1" ul class = "droptrue">
  <Li class = "ui-estado-default"> se puede colocar .. </ li>
  <Li class = "ui-estado-default"> .. una lista vacía </ 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>
 
<Id = "sortable2" ul class = "dropfalse">
  <Li class = "ui-estado-highlight"> no se puede colocar .. </ li>
  <Li class = "ui-estado-highlight"> .. una lista vacía </ li>
  <Li class = "ui-estado-highlight"> Artículo 3 </ li>
  <Li class = "ui-estado-highlight"> Artículo 4 </ li>
  <Li class = "ui-estado-highlight"> Artículo 5 </ li>
</ Ul>
 
<Id = "sortable3" ul class = "droptrue">
</ Ul>
 
style="clear:both"> <br
 
 
</ Body>
</ Html>

Incluir / excluir de entrada

Designado por los items pasan a jQuery opciones de selección de los elementos que se pueden ordenar. Esta opción está fuera del proyecto no se puede pedir, pero no son válidos entrada sortable objetivo.

Si desea evitar entradas específicas ordenados, para cancel la opción de pasar un selector de jQuery. de entrada cancelado sigue siendo válida objetivo clasificar las demás entradas.

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> jQuery UI clasificación (Asc) - Incluir / Excluir entrada </ 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>
  # Sortable1, # sortable2 {list-style-type: none; margin: 0; padding: 0; zoom: 1;}
  # Sortable1 li, li {# sortable2 margin: 0 5px 5px 5px; padding: 3px; anchura: 90%;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "# Sortable1") .sortable ({
      artículos: "li: no (.ui-estado-discapacitados)"
    });
 
    $ ( "# Sortable2") .sortable ({
      cancelar: ".ui-estado deshabilitado"
    });
 
    $ ( "# Sortable1 li, li # sortable2") .disableSelection ();
  });
  </ Script>
</ Head>
<Cuerpo>
 
<h3 class = "docs"> especificar qué elementos se pueden ordenar: </ h3>
 
<Ul id = "sortable1">
  <Li class = "ui-estado-default"> Artículo 1 </ li>
  <Li class = "ui-estado predeterminado de la interfaz de usuario de estado discapacitado"> (no estoy sortable o un destino de colocación) </ li>
  <Li class = "ui-estado predeterminado de la interfaz de usuario de estado discapacitado"> (no estoy sortable o un destino de colocación) </ li>
  <Li class = "ui-estado-default"> Artículo 4 </ li>
</ Ul>
 
<H3 class = "docs"> cancelar el pedido (pero como un destino de colocación): </ h3>
 
<Ul id = "sortable2">
  <Li class = "ui-estado-default"> Artículo 1 </ li>
  <Li class = "ui-estado predeterminado de la interfaz de usuario de estado discapacitado"> (no estoy ordenable) </ li>
  <Li class = "ui-estado predeterminado de la interfaz de usuario de estado discapacitado"> (no estoy ordenable) </ li>
  <Li class = "ui-estado-default"> Artículo 4 </ li>
</ Ul>
 
 
</ Body>
</ Html>

componentes del portal (portlets)

Habilitar los componentes del portal (VID) de estilo como se puede ordenar y utilizar connectWith opción para permitir la comunicación entre las columnas de ordenación.

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <title> jQuery UI de clasificación (Asc) - componentes del portal (portlets) </ 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>
  body {
    min-width: 520px;
  }
  .Column {
    Anchura: 170px;
    float: left;
    padding-bottom: 100px;
  }
  .portlet {
    margin: 0 1 em 1 em 0;
    padding: 0.3em;
  }
  .portlet-header {
    padding: 0.2em 0.3em;
    margin-bottom: 0.5em;
    position: relative;
  }
  .portlet-toggle {
    position: absolute;
    superior: 50%;
    derecha: 0;
    margin-top: -8px;
  }
  .portlet-contenidos {
    padding: 0.4em;
  }
  .portlet-marcador de posición {
    frontera: 1px negro de puntos;
    margin: 0 1 em 1 em 0;
    altura: 50px;
  }
  </ Style>
  <Script>
  $ (Function () {
    $ ( ".Column") .sortable ({
      connectWith: ".Column",
      manejar: ".portlet-header",
      cancelar: ".portlet-toggle",
      marcador de posición: "portlet-ui-marcador de posición angular de todo"
    });
 
    $ ( ".portlet")
      .addClass ( "ui-ui-widget de widget de contenido-ui-helper-clearfix ui-esquina-all")
      .find ( ".portlet-header")
        .addClass ( "-aparato UI-header-ui esquina todos")
        .prepend ( "<span class =" ui ui-icon-icono-portlet-minusthick alternar '> </ span> ");
 
    $ ( ".portlet-Toggle") .click (function () {
      icono var = $ (this);
      icon.toggleClass ( "ui-icon-minusthick ui-icon-plusthick");
      icon.closest ( ".portlet") .find ( ".portlet en contenido") .toggle ();
    });
  });
  </ Script>
</ Head>
<Cuerpo>
 
<Div class = "columna">
 
  <Div class = "ventana de">
    <Div class = "portlet-header"> Suscribirse </ div>
    <Div class = "portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </ div>
  </ Div>
 
  <Div class = "ventana de">
    <Div class = "portlet-header"> noticias </ div>
    <Div class = "portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </ div>
  </ Div>
 
</ Div>
 
<Div class = "columna">
 
  <Div class = "ventana de">
    <Div class = "portlet-header"> cesta </ ​​div>
    <Div class = "portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </ div>
  </ Div>
 
</ Div>
 
<Div class = "columna">
 
  <Div class = "ventana de">
    <Div class = "portlet-header"> vínculo </ div>
    <Div class = "portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </ div>
  </ Div>
 
  <Div class = "ventana de">
    <Div class = "portlet-header"> Imagen </ div>
    <Div class = "portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </ div>
  </ Div>
 
</ Div>
 
 
</ Body>
</ Html>