UI Sortable, j'essaie de trier deux divisions

alfred5 · 05/04/2011, 12h28

Bonjour tt le monde ;
je suis entrain de découvrir jquery; j'ai créé 2 div dans ma page html et j'ai imporé les fichiers de jquery dans le header de mon fichier html;
bref, voila le code de ma page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.11.custom.css" rel="Stylesheet" />	
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script>
<style>
#mondiv {
	width:150px;
	height:150px;
	background-color:#999;
}
</style>
<script>
	$(function() {
		$("mondiv").sortable();
		$("mondiv").disableSelection();
	});
</script>
</head>
 
<body>
<div class="demo">
 
<div id="mondiv">
	<p>text 1</p>
</div>
<div id="mondiv">
	<p>text 2</p>
</div>
 
</div><!-- End demo -->
</body>
</html>

lorsque j'ouvre ma page HTML, je tente de faire trier les 2 div (glisser l'un au dessus d l'autre) mais ça marche pas !!?
un aide SVP;
merci

SpaceFrog · 05/04/2011, 12h46

comme son nom l'indique...
sortable

alfred5 · 05/04/2011, 12h58

Citation:

Envoyé par SpaceFrog

comme son nom l'indique...
sortable

Comment !! j'ai pas compris;
Prière de m'illustrer l'erreur

nadox · 05/04/2011, 13h18

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<ul id="monDiv">
    <li>1</li>
    <li>2</li>
</ul>

SpaceFrog · 05/04/2011, 13h22

un id DOIT être unique sur la page ...

alfred5 · 05/04/2011, 13h32

Citation:

Envoyé par nadox

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<ul id="monDiv">
    <li>1</li>
    <li>2</li>
</ul>

oui ça marche si je met les ul.
je veux appliquer le tri sur les div? commet je peut faire ça ?

alfred5 · 05/04/2011, 13h34

Citation:

Envoyé par SpaceFrog

un id DOIT être unique sur la page ...

même si je change le nom de 2 eme div ça marche pas

nadox · 05/04/2011, 17h19

Sortable permet de trier les éléments contenu dans la cible.
On n'appelle pas la méthode pour les éléments à trier, mais pour le conteneur des éléments à trier.

Donc avec quelque chose comme ça :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
        $( "#monDiv1, #monDiv2" ).sortable().disableSelection();

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
<div id="monDiv1">
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>
<div id="monDiv2">
    <p>4</p>
    <p>5</p>
    <p>6</p>
</div>

tu rends le contenu de tes deux divs "sortable" mais séparément(on ne peux pas faire glisser un élément de l'une à l'autre).

Et avec quelque chose comme ça :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
        $( "#monDiv1, #monDiv2" ).sortable({
            connectWith: ".connectedSortable"
        }).disableSelection();

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
<div id="monDiv1" class="connectedSortable">
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>
<div id="monDiv2" class="connectedSortable">
    <p>4</p>
    <p>5</p>
    <p>6</p>
</div>

tu rends tes deux div triable ensemble(on peut passer des éléments de l'une à l'autre).

05/04/2011, 12h46	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	comme son nom l'indique... sortable __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

05/04/2011, 13h22	#5
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	un id DOIT être unique sur la page ... __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email