UI Sortable, j'essaie de trier deux divisions

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:

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

comme son nom l'indique...
sortable

Citation:

Envoyé par SpaceFrog

comme son nom l'indique...
sortable

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

Code:

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

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

Citation:
Envoyé par nadox
Code:

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 ?

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 :?

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:

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

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:

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

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).