jQuery UI exemplo - ordenação (Ordenável)
Use o mouse para ajustar a lista ou grade ordenadas elementos.
Para mais detalhes sobre a interação classificáveis, consulte a documentação da API de widgets classificáveis (classificáveis o Widget) .
A função padrão
recurso classificáveis está habilitado em qualquer elemento DOM. Clique e arraste o mouse para a lista de elementos de um novo local, outros itens serão ajustados automaticamente. Por padrão, classificáveis cada entrada compartilhada draggable atributo.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI triagem (Ordenável) - A função padrã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>
#sortable {list-style-type: none; margin: 0; padding: 0; width: 60%;}
li #sortable {margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px;}
extensão #sortable li {position: absolute; margin-left: -1.3em;}
</ Style>
<Script>
$ (Function () {
$ ( "#sortable") .sortable ();
$ ( "#sortable") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<Ul id = "classificáveis">
<Li class = "ui-estado padrão"> <span class = "ui-ui ícone-icon-arrowthick-2-ns"> </ span> Item 1 </ li>
<Li class = "ui-estado padrão"> <span class = "ui-ui ícone-icon-arrowthick-2-ns"> </ span> Item 2 </ li>
<Li class = "ui-estado padrão"> <span class = "ui-ui ícone-icon-arrowthick-2-ns"> </ span> Item 3 </ li>
<Li class = "ui-estado padrão"> <span class = "ui-ui ícone-icon-arrowthick-2-ns"> </ span> Item 4 </ li>
<Li class = "ui-estado padrão"> <span class = "ui-ui ícone-icon-arrowthick-2-ns"> </ span> Item 5 </ li>
<Li class = "ui-estado padrão"> <span class = "ui-ui ícone-icon-arrowthick-2-ns"> </ span> Item 6 </ li>
<Li class = "ui-estado padrão"> <span class = "ui-ui ícone-icon-arrowthick-2-ns"> </ span> Item 7 </ li>
</ Ul>
</ Body>
</ Html>
Lista Connection
Pela connectWith passando uma opção de seletor para colocar uma lista dos elementos na lista ordenada para outro, e vice-versa. A maneira mais fácil é com uma lista de todos os grupos relevantes de uma classe CSS e, em seguida, passar a classe para a função classificáveis (por exemplo, connectWith: '.myclass' ).
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI triagem (Ordenável) - lista de conexã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>
# Sortable1, # sortable2 {list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px;}
# Sortable1 li, li # sortable2 {margin: 5px 5px 5px 0; padding: 5px; font-size: 1.2em; width: 120px;}
</ Style>
<Script>
$ (Function () {
$ ( "# Sortable1, # sortable2") .sortable ({
connectWith: ".connectedSortable"
.}) DisableSelection ();
});
</ Script>
</ Head>
<Body>
<Ul id = class "sortable1" = "connectedSortable">
<LI class = "ui-estado-padrão"> Item 1 </ li>
<LI class = "ui-estado-padrão"> Item 2 </ li>
<LI class = "ui-estado-padrão"> Item 3 </ li>
<LI class = "ui-estado-padrão"> Item 4 </ li>
<LI class = "ui-estado-padrão"> Item 5 </ li>
</ Ul>
<Ul id = class "sortable2" = "connectedSortable">
<LI class = "ui-state-highlight"> Item 1 </ li>
<LI class = "ui-state-highlight"> Item 2 </ li>
<LI class = "ui-state-highlight"> Item 3 </ li>
<LI class = "ui-state-highlight"> Item 4 </ li>
<LI class = "ui-state-highlight"> Item 5 </ li>
</ Ul>
</ Body>
</ Html>
guia Lista de conexão
Ao colocar o topo dos itens da lista para a guia apropriada para colocar uma lista dos elementos na lista ordenada para outro, e vice-versa.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI triagem (Ordenável) - lista de conexão guia </ 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: 5px 5px 5px 0; padding: 5px; font-size: 1.2em; width: 120px;}
</ Style>
<Script>
$ (Function () {
$ ( "# Sortable1, # sortable2") .sortable () disableSelection () .;
var $ guias = $ ( "#tabs") .tabs ();
var $ tab_items = $ ( "ul: primeira li", $ guias) .droppable ({
aceitar: "li .connectedSortable",
hoverClass: "ui-state-hover",
solte: function (evento, ui) {
var $ item = $ (this);
$ List var = $ ($ item.find ( "a") .attr ( "href"))
.find ( ".connectedSortable");
ui.draggable.hide ( "lento", function () {
$ Tabs.tabs ( "opção", "ativa", $ tab_items.index ($ item));
$ (Este) .appendTo ($ list) .mostrar ( "lento");
});
}
});
});
</ Script>
</ Head>
<Body>
<div id = "tabs">
<Ul>
<Li> <a href="#tabs-1"> Nunc tincidunt </a> </ li>
<Li> <a href="#tabs-2"> Proin dolor </a> </ li>
</ Ul>
<div id = "guias-1">
<Ul id = "sortable1" class = "connectedSortable ui-helper-reset">
<LI class = "ui-estado-padrão"> Item 1 </ li>
<LI class = "ui-estado-padrão"> Item 2 </ li>
<LI class = "ui-estado-padrão"> Item 3 </ li>
<LI class = "ui-estado-padrão"> Item 4 </ li>
<LI class = "ui-estado-padrão"> Item 5 </ li>
</ Ul>
</ Div>
<div id = "guias-2">
<Ul id = "sortable2" class = "connectedSortable ui-helper-reset">
<LI class = "ui-state-highlight"> Item 1 </ li>
<LI class = "ui-state-highlight"> Item 2 </ li>
<LI class = "ui-state-highlight"> Item 3 </ li>
<LI class = "ui-state-highlight"> Item 4 </ li>
<LI class = "ui-state-highlight"> Item 5 </ li>
</ Ul>
</ Div>
</ Div>
</ Body>
</ Html>
início retardado
Retardado pelo atraso de tempo e distância para evitar o tipo acidental. Por delay milissegundos opção deve ser definida antes do início do arrasto do tipo. Por distance pixels opção deve ser definida antes do início do arrasto do tipo.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI triagem (Ordenável) - início retardado </ 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: 5px 5px 5px 0; padding: 5px; font-size: 1.2em; width: 95%;}
</ Style>
<Script>
$ (Function () {
$ ( "# Sortable1") .sortable ({
delay: 300
});
$ ( "# Sortable2") .sortable ({
distância: 15
});
$ ( "LI") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<H3 class = "docs"> 300ms de atraso tempo: </ h3>
<Ul id = "sortable1">
<LI class = "ui-estado-padrão"> Item 1 </ li>
<LI class = "ui-estado-padrão"> Item 2 </ li>
<LI class = "ui-estado-padrão"> Item 3 </ li>
<LI class = "ui-estado-padrão"> Item 4 </ li>
</ Ul>
<H3 class = "docs"> atraso distância 15px: </ h3>
<Ul id = "sortable2">
<LI class = "ui-estado-padrão"> Item 1 </ li>
<LI class = "ui-estado-padrão"> Item 2 </ li>
<LI class = "ui-estado-padrão"> Item 3 </ li>
<LI class = "ui-estado-padrão"> Item 4 </ li>
</ Ul>
</ Body>
</ Html>
Ele é exibido como uma grade
Deixe classificáveis entradas são exibidas como uma grade, de modo que eles usam CSS com as mesmas dimensões e a tela flutuante.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI triagem (Ordenável) - exibir uma grade </ 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 {list-style-type: none; margin: 0; padding: 0; width: 450px;}
li #sortable {margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4EM; text-align: center;}
</ Style>
<Script>
$ (Function () {
$ ( "#sortable") .sortable ();
$ ( "#sortable") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<Ul id = "classificáveis">
<Li class = "ui-estado-padrão"> 1 </ li>
<Li class = "ui-estado-padrão"> 2 </ li>
<Li class = "ui-estado-padrão"> 3 </ li>
<Li class = "ui-estado-padrão"> 4 </ li>
<Li class = "ui-estado-padrão"> 5 </ li>
<Li class = "ui-estado-padrão"> 6 </ li>
<Li class = "ui-estado-padrão"> 7 </ li>
<Li class = "ui-estado-padrão"> 8 </ li>
<Li class = "ui-estado-padrão"> 9 </ li>
<Li class = "ui-estado-padrão"> 10 </ li>
<Li class = "ui-estado-padrão"> 11 </ li>
<Li class = "ui-estado-padrão"> 12 </ li>
</ Ul>
</ Body>
</ Html>
Coloque um espaço reservado
Ao arrastar uma entrada classificáveis para um novo local, as outras entradas vai abrir espaço para a entrada. Peça placeholder opção de transferência para definir uma classe de estilo visual em branco. Os valores booleanos forcePlaceholderSize opção para definir o tamanho do espaço reservado.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI triagem (Ordenável) - espaço reservado 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 {list-style-type: none; margin: 0; padding: 0; width: 60%;}
li #sortable {margin: 5px 5px 5px 0; padding: 5px; font-size: 1.2em; height: 1.5em;}
html> #sortable corpo li {height: 1.5em; line-height: 1.2em;}
.ui-estado-destaque {height: 1.5em; line-height: 1.2em;}
</ Style>
<Script>
$ (Function () {
$ ( "#sortable") .sortable ({
espaço reservado: "ui-state-destaque"
});
$ ( "#sortable") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<Ul id = "classificáveis">
<LI class = "ui-estado-padrão"> Item 1 </ li>
<LI class = "ui-estado-padrão"> Item 2 </ li>
<LI class = "ui-estado-padrão"> Item 3 </ li>
<LI class = "ui-estado-padrão"> Item 4 </ li>
<LI class = "ui-estado-padrão"> Item 5 </ li>
<LI class = "ui-estado-padrão"> Item 6 </ li>
<LI class = "ui-estado-padrão"> Item 7 </ li>
</ Ul>
</ Body>
</ Html>
Processamento de lista vazia
por Opção é definida false , para evitar uma lista de todas as entradas são colocados em uma lista vazia separado. Por padrão, as entradas classificáveis pode ser colocado em uma lista vazia.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI triagem (Ordenável) - manipulação de lista vazia </ 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 {list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 143px;}
# Sortable1 li, li # sortable2, # sortable3 li {margin: 5px; padding: 5px; font-size: 1.2em; width: 120px;}
</ Style>
<Script>
$ (Function () {
$ ( "Ul.droptrue") .sortable ({
connectWith: "ul"
});
$ ( "Ul.dropfalse") .sortable ({
connectWith: "UL",
dropOnEmpty: false
});
$ ( "# Sortable1, # sortable2, # sortable3") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<Ul id = "sortable1" class = "droptrue">
<Li class = "ui-estado padrão"> pode ser colocado .. </ li>
<Li class = "-ui-estado padrão"> .. uma lista vazia </ li>
<LI class = "ui-estado-padrão"> Item 3 </ li>
<LI class = "ui-estado-padrão"> Item 4 </ li>
<LI class = "ui-estado-padrão"> Item 5 </ li>
</ Ul>
<Ul id = "sortable2" class = "dropfalse">
<Li class = "ui-state-destaque"> não pode ser colocado .. </ li>
<Li class = "ui-state-highlight"> .. uma lista vazia </ li>
<LI class = "ui-state-highlight"> Item 3 </ li>
<LI class = "ui-state-highlight"> Item 4 </ li>
<LI class = "ui-state-highlight"> Item 5 </ li>
</ Ul>
<Ul id = "sortable3" class = "droptrue">
</ Ul>
style="clear:both"> <br
</ Body>
</ Html>
Inclusão / Exclusão entrada
Designado pelos items passar algumas opções seletor jQuery quais itens podem ser classificados. Esta opção está fora do projeto não pode ser encomendado, mas eles não são de entrada classificáveis alvo válido.
Se você quer evitar entradas específicas escolhidas, para cancel a opção de passar um seletor jQuery. entrada cancelada ainda é válido alvo triagem outras entradas.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI triagem (Ordenável) - Inclusão / Exclusão de 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: 5px 5px 5px 0; padding: 3px; width: 90%;}
</ Style>
<Script>
$ (Function () {
$ ( "# Sortable1") .sortable ({
itens: "li: não (.ui-estado desativado)"
});
$ ( "# Sortable2") .sortable ({
cancel: ".ui-estado desativado"
});
$ ( "# Sortable1 li, # sortable2 li") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<h3 class = "docs"> especificam quais itens são classificáveis: </ h3>
<Ul id = "sortable1">
<LI class = "ui-estado-padrão"> Item 1 </ li>
<Li class = "-ui-ui-estado padrão-estado desativado"> (não tenho classificáveis ou um destino de soltar) </ li>
<Li class = "-ui-ui-estado padrão-estado desativado"> (não tenho classificáveis ou um destino de soltar) </ li>
<LI class = "ui-estado-padrão"> Item 4 </ li>
</ Ul>
<H3 class = "docs"> cancelar a ordem (mas como um destino de soltar): </ h3>
<Ul id = "sortable2">
<LI class = "ui-estado-padrão"> Item 1 </ li>
<Li class = "-ui-ui-estado padrão-estado desativado"> (não tenho classificáveis) </ li>
<Li class = "-ui-ui-estado padrão-estado desativado"> (não tenho classificáveis) </ li>
<LI class = "ui-estado-padrão"> Item 4 </ li>
</ Ul>
</ Body>
</ Html>
componentes do portal (Portlets)
Ativar componentes do portal (div estilo) como classificáveis, e usar connectWith opção para permitir a comunicação entre as colunas de ordenação.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<title> jQuery UI de classificação (Ordenável) - componentes do 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 {
width: 170px;
float: left;
padding-bottom: 100px;
}
.portlet {
margin: 0 1em 1em 0;
padding: 0.3em;
}
.portlet-header {
padding: 0.2em 0.3em;
margin-bottom: 0.5em;
position: relative;
}
.portlet-toggle {
position: absolute;
superior: 50%;
direita: 0;
margin-top: -8px;
}
.portlet-content {
padding: 0.4em;
}
.portlet-espaço reservado {
border: 1px preta pontilhada;
margin: 0 1em 1em 0;
height: 50px;
}
</ Style>
<Script>
$ (Function () {
$ ( ".Column") .sortable ({
connectWith: ".Column",
punho: ".portlet-header",
cancel: ".portlet-toggle",
espaço reservado: "portlet-espaço reservado ui-canto-all"
});
$ ( ".portlet")
.addClass ( "ui-widget-ui-widget conteúdo ui-helper-clearfix ui-canto-all")
.find ( ".portlet-header")
.addClass ( "ui-widget-header-ui-corner todos")
.prepend ( "<span class = 'ui-ui ícone-icon-minusthick portlet-toggle"> </ span> ");
$ .click (Function (( ".portlet-Toggle")) {
var icon = $ (this);
icon.toggleClass ( "-ui-ui ícone minusthick-icon-plusthick");
icon.closest ( ".portlet") .find ( ".portlet-content") .toggle ();
});
});
</ Script>
</ Head>
<Body>
<Div class = "coluna">
<Div class = "portlet">
<Div class = "portlet-header"> Assinar </ div>
<Div class = "portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </ div>
</ Div>
<Div class = "portlet">
<Div class = "portlet-header"> news </ div>
<Div class = "portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </ div>
</ Div>
</ Div>
<Div class = "coluna">
<Div class = "portlet">
<Div class = "portlet-header"> carrinho </ div>
<Div class = "portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </ div>
</ Div>
</ Div>
<Div class = "coluna">
<Div class = "portlet">
<Div class = "portlet-header"> link </ div>
<Div class = "portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </ div>
</ Div>
<Div class = "portlet">
<Div class = "portlet-header"> Imagem </ div>
<Div class = "portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </ div>
</ Div>
</ Div>
</ Body>
</ Html>