jQuery UI par exemple - le tri (Sortable)
Utilisez la souris pour ajuster la liste ou la grille des éléments dans l'ordre.
Pour en savoir plus sur les détails interactifs triables, consultez la documentation API widgets triables (Sortable Widget).
La fonction par défaut
En tout élément DOM Enabled sortable fonctionnalité. Cliquez et faites glisser la souris sur la liste des éléments d'un nouvel emplacement, d'autres éléments seront automatiquement ajusté. Par défaut, sortable chaque entrée partagée draggable attribut.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<title> jQuery UI tri (Sortable) - La valeur par défaut la fonction </ 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; largeur: 60%;}
# Sortable li {margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; hauteur: 18px;}
# Sortable li durée {position: absolute; margin-left:-1.3em;}
</ Style>
<Script>
$ (Function () {
. $ ( "# Triable") Sortable ();
$ ( "# Triable") DisableSelection ().
});
</ Script>
</ Head>
<Body>
<Ul id = "sortable">
<li class="ui-state-default"> <span class="ui-icon ui-icon-arrowthick-2-ns"> </ span> Article 1 </ li>
<li class="ui-state-default"> <span class="ui-icon ui-icon-arrowthick-2-ns"> </ span> Article 2 </ li>
<li class="ui-state-default"> <span class="ui-icon ui-icon-arrowthick-2-ns"> </ span> Article 3 </ li>
<li class="ui-state-default"> <span class="ui-icon ui-icon-arrowthick-2-ns"> </ span> Article 4 </ li>
<Li class = "ui-state-default"> <span class = "ui-icon ui-icon-arrowthick-2-ns"> </ span> Article 5 </ li>
<Li class = "ui-state-default"> <span class = "ui-icon ui-icon-arrowthick-2-ns"> </ span> Article 6 </ li>
<Li class = "ui-state-default"> <span class = "ui-icon ui-icon-arrowthick-2-ns"> </ span> Article 7 </ li>
</ Ul>
</ Body>
</ Html>
Liste des connexions
Pour passer à travers un sélecteur connectWith possibilité de mettre une liste des éléments dans la liste triée à l' autre, et vice versa. Le plus simple est une liste de classe CSS de tous les groupes concernés, puis transmis à la fonction sortable de classe connectWith: '.myclass'
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI tri (Sortable) - Liste de connexion </ 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 {type list-style: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px;}
# Sortable1 li, # sortable2 li {margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; largeur: 120px;}
</ Style>
<Script>
$ (Function () {
$ ( "# Sortable1, # sortable2"). Sortable ({
connectWith: ". connectedSortable"
}) DisableSelection (.);
});
</ Script>
</ Head>
<Body>
<ul id="sortable1" class="connectedSortable">
<Li class = "ui-state-default"> Article 1 </ li>
<Li class = "ui-state-default"> Article 2 </ li>
<Li class = "ui-state-default"> Article 3 </ li>
<Li class = "ui-state-default"> Article 4 </ li>
<Li class = "ui-state-default"> Article 5 </ li>
</ Ul>
<Ul Id = "sortable2" class = "connectedSortable">
<Li class = "ui-state-highlight"> Article 1 </ li>
<li class="ui-state-highlight"> Point 2 </ li>
<li class="ui-state-highlight"> Point 3 </ li>
<li class="ui-state-highlight"> Point 4 </ li>
<li class="ui-state-highlight"> Point 5 </ li>
</ Ul>
</ Body>
</ Html>
Connexion Liste onglet
En plaçant le haut de la liste des éléments à l'onglet approprié de mettre une liste des éléments dans la liste triée à l'autre, et vice versa.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<title> jQuery UI tri (Sortable) - onglet connexion list </ 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, # sortable2 li {margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; largeur: 120px;}
</ Style>
<Script>
$ (Function () {
$ ( "# Sortable1, # sortable2") .sortable () disableSelection () .;
var tabs $ = $ ( "#") onglets des onglets (.);
var $ tab_items = $ ( "ul: premier li", $ onglets). largables ({
Accepter: ". connectedSortable li",
hoverclass: "state-ui-hover",
drop: function (event, ui) {
var $ item = $ (this);
var $ list = $ ($ item.find ( "a"). attr ( "href"))
. Recherche ( ". ConnectedSortable");
ui.draggable.hide ( "lent", function () {
$ Tabs.tabs ( "option", "actif", $ tab_items.index ($ item));
$ (Ce). AppendTo ($ liste). Show ( "lent");
});
}
});
});
</ 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="tabs-1">
<ul id="sortable1" class="connectedSortable ui-helper-reset">
<Li class = "ui-state-default"> Article 1 </ li>
<Li class = "ui-state-default"> Article 2 </ li>
<Li class = "ui-state-default"> Article 3 </ li>
<Li class = "ui-state-default"> Article 4 </ li>
<Li class = "ui-state-default"> Article 5 </ li>
</ Ul>
</ Div>
<Div id = "tabs-2">
<Ul id = classe "sortable2" = "ui-helper-reset connectedSortable">
<li class="ui-state-highlight"> Point 1 </ li>
<Li class = "ui-state-highlight"> Article 2 </ li>
<li class="ui-state-highlight"> Point 3 </ li>
<li class="ui-state-highlight"> Point 4 </ li>
<li class="ui-state-highlight"> Point 5 </ li>
</ Ul>
</ Div>
</ Div>
</ Body>
</ Html>
départ différé
Retardée par le temps de retard et de distance pour éviter tout risque de tri. En fixant le début delay option doit être trié avant de faire glisser millisecondes. Par la distance pixels option doit être réglée avant le début de la traînée de la sorte.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Title> JQuery UI tri (Sortable) - retardée début </ 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, # sortable2 li {margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; largeur: 95%;}
</ Style>
<Script>
$ (Function () {
$ ( "# Sortable1"). Sortable ({
délai: 300
});
$ ( "# Sortable2"). Sortable ({
distance: 15
});
$ ( "Li") DisableSelection ().
});
</ Script>
</ Head>
<Body>
<H3 class = "docs"> temporisation 300ms: </ h3>
<Ul id = "sortable1">
<Li class = "ui-state-default"> Article 1 </ li>
<Li class = "ui-state-default"> Article 2 </ li>
<Li class = "ui-state-default"> Article 3 </ li>
<Li class = "ui-state-default"> Article 4 </ li>
</ Ul>
<h3 class="docs"> distance de retard 15px: </ h3>
<ul id="sortable2">
<Li class = "ui-state-default"> Article 1 </ li>
<Li class = "ui-state-default"> Article 2 </ li>
<Li class = "ui-state-default"> Article 3 </ li>
<Li class = "ui-state-default"> Article 4 </ li>
</ Ul>
</ Body>
</ Html>
Il est affiché sous la forme d'une grille
Soit sortable entrées sont affichées sous forme de grille, de sorte qu'ils utilisent CSS avec les mêmes dimensions et le flottement affichage.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Title> JQuery UI tri (Sortable) - affichage d'une grille </ 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;}
# Sortable li {margin: 3px 3px 3px 0; padding: 1px; float: left; largeur: 100px; height: 90px; font-size: 4em; text-align: center;}
</ Style>
<Script>
$ (Function () {
. $ ( "# Triable") Sortable ();
$ ( "# Triable"). DisableSelection ();
});
</ Script>
</ Head>
<Body>
<Ul id = "sortable">
<Class = Li "ui-state-default"> 1 </ li>
<Class = Li "ui-state-default"> 2 </ li>
<Class = Li "ui-state-default"> 3 </ li>
<Class = Li "ui-state-default"> 4 </ li>
<Class = Li "ui-state-default"> 5 </ li>
<Class = Li "ui-state-default"> 6 </ li>
<Class = Li "ui-state-default"> 7 </ li>
<Class = Li "ui-state-default"> 8 </ li>
<Class = Li "ui-state-default"> 9 </ li>
<Class = Li "ui-state-default"> 10 </ li>
<Class = Li "ui-state-default"> 11 </ li>
<Class = Li "ui-state-default"> 12 </ li>
</ Ul>
</ Body>
</ Html>
Placez un espace réservé
Lorsque vous faites glisser une sortable entrée vers un nouvel emplacement, l'autre entrées fera de la place pour l'entrée. placeholder possibilité de passer une classe pour définir l'ébauche de style visuel. Boolean valeurs forcePlaceholderSize option pour définir la taille de l'espace réservé.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI tri (Sortable) - espace réservé placé </ 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; largeur: 60%;}
# Sortable li {margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; hauteur: 1.5em;}
html> body # sortable li {height: 1.5em; line-height: 1.2em;}
. Ui-état-highlight {height: 1.5em; line-height: 1.2em;}
</ Style>
<Script>
$ (Function () {
$ ( "#sortable") .sortable ({
espace réservé: "ui-state-highlight"
});
$ .disableSelection ( "#sortable") ();
});
</ Script>
</ Head>
<Body>
<Ul id = "sortable">
<Li class = "ui-state-default"> Article 1 </ li>
<Li class = "ui-state-default"> Article 2 </ li>
<Li class = "ui-state-default"> Article 3 </ li>
<Li class = "ui-state-default"> Article 4 </ li>
<Li class = "ui-state-default"> Article 5 </ li>
<Li class = "ui-state-default"> Article 6 </ li>
<Li class = "ui-state-default"> Article 7 </ li>
</ Ul>
</ Body>
</ Html>
Traitement vide liste
par Option est définie false afin d'éviter une liste de toutes les entrées sont placées dans un vide séparé liste. Par défaut, les entrées triables peuvent être placés dans une liste vide.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<title> jQuery UI tri (Sortable) - manutention vide liste </ 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; largeur: 143px;}
# Sortable1 li, li # sortable2, # sortable3 li {margin: 5px; padding: 5px; font-size: 1.2em; largeur: 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-state-default"> peut être placé .. </ li>
<Li class = "ui-state-default"> .. une liste vide </ li>
<Li class = "ui-state-default"> Article 3 </ li>
<Li class = "ui-state-default"> Article 4 </ li>
<Li class = "ui-state-default"> Article 5 </ li>
</ Ul>
<ul id="sortable2" class="dropfalse">
<li class="ui-state-highlight"> pas être placé .. </ li>
<Li class = "ui-state-highlight"> .. une liste vide </ li>
<Li Class = "ui-state-highlight"> Point 3 </ li>
<li class="ui-state-highlight"> Point 4 </ li>
<li class="ui-state-highlight"> Point 5 </ li>
</ Ul>
<ul id="sortable3" class="droptrue">
</ Ul>
style="clear:both"> <br
</ Body>
</ Html>
Inclure / Exclure l'entrée
items spécifiés par la possibilité de passer un sélecteur jQuery quels éléments peuvent être triés. Cette option est disponible à l'extérieur de l'article commandé, mais ils ne sont pas sortable entrée valide cible.
Si vous voulez éviter un type particulier d'entrée, la possibilité d' cancel passer un sélecteur jQuery. entrée Annulé est encore entrées valides autre type de but.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Title> JQuery UI tri (Sortable) - Inclure / Exclure l'entrée </ 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, # sortable2 li {margin: 0 5px 5px 5px; padding: 3px; largeur: 90%;}
</ Style>
<Script>
$ (Function () {
$ ( "# Sortable1"). Sortable ({
articles: "li: non (. ui-état désactivé)"
});
$ ( "# Sortable2"). Sortable ({
Annuler: ". ui-state-disabled"
});
$ ( "# Sortable1 li, li # sortable2") DisableSelection ().
});
</ Script>
</ Head>
<Body>
<h3 class="docs"> spécifier les éléments à sortable: </ h3>
<Ul id = "sortable1">
<Li class = "ui-state-default"> Article 1 </ li>
<Li class = "ui-état par défaut ui-state-disabled"> (Je ne suis pas sortable ou une cible de dépôt) </ li>
<li class="ui-state-default ui-state-disabled"> (Je ne suis pas sortable ou une baisse cible) </ li>
<Li class = "ui-state-default"> Article 4 </ li>
</ Ul>
<H3 class = "docs"> annuler la commande (mais comme une cible de dépôt): </ h3>
<Ul Id = "sortable2">
<Li class = "ui-state-default"> Article 1 </ li>
<li class="ui-state-default ui-state-disabled"> (Je ne suis pas sortable) </ li>
<li class="ui-state-default ui-state-disabled"> (Je ne suis pas sortable) </ li>
<Li class = "ui-state-default"> Article 4 </ li>
</ Ul>
</ Body>
</ Html>
Portail des composants (portlets)
Activer portail composants (Styled div) comme sortable, et l'utilisation connectWith option pour permettre le tri entre les colonnes.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<title> jQuery UI tri (Sortable) - composants de portail (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;
}
. Colonne {
largeur: 170px;
float: left;
padding-bottom: 100px;
}
. Portlet {
margin: 0 1em 1em 0;
padding: 0.3em;
}
. Portlet-tête {
padding: 0.2em 0.3em;
margin-bottom: 0.5em;
position: relative;
}
. Portlet-toggle {
position: absolute;
top: 50%;
droite: 0;
margin-top:-8px;
}
. Portlet contenu {
padding: 0.4em;
}
. Portlet-espace réservé {
border: 1px noir en pointillés;
margin: 0 1em 1em 0;
hauteur: 50px;
}
</ Style>
<Script>
$ (Function () {
$ ( ". Colonne"). Sortable ({
connectWith:. "colonne",
poignée: ". portlet-tête",
Annuler: ". portlet-toggle",
espace réservé: "portlet-espace réservé ui-coin-all"
});
$ ( ". Portlet")
. AddClass ( "ui-widget ui-widget-contenu ui-helper-clearfix ui-coin-all»)
.Find ( ".portlet-tête")
. AddClass ( "ui-widget-tête ui-coin-all»)
. Prepend ( "<span class = 'ui-icon ui-icon-minusthick portlet-toggle"> </ span> ");
$ ( ". Portlet-toggle"). Cliquez sur (function () {
var icône = $ (this);
icon.toggleClass ( "ui-icon-minusthick ui-icon-plusthick");
icon.closest ( «portlet».) trouver ( «portlet-content.") toggle ()..;
});
});
</ Script>
</ Head>
<Body>
<Div class = "colonne">
<div class="portlet">
<div class="portlet-header"> abonnement </ div>
<div class="portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </ div>
</ Div>
<div class="portlet">
<div class="portlet-header"> Nouvelles </ div>
<div class="portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </ div>
</ Div>
</ Div>
<div class="column">
<Div class = "portlet">
<div class="portlet-header"> commercial </ div>
<div class="portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </ div>
</ Div>
</ Div>
<div class="column">
<Div class = "portlet">
<div class="portlet-header"> lien </ div>
<div class="portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </ div>
</ Div>
<Div class = "portlet">
<Div Class = "portlet-header"> Image </ div>
<Div class = "portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </ div>
</ Div>
</ Div>
</ Body>
</ Html>