mise en place de sortable

Version imprimable

Bonjour à tous,
je code en C# asp.net (jsuis un noob) et j'aimerais utiliser du javascript (c'est la première fois) avec jquery pour pouvoir ranger dans l'ordre des lignes.
je n'y comprends rien mon code ne fonctionne pas.
J'espère que vous pourrez m'aider à comprendre pourquoi ca ne fonctionne pas
Voici mon code:

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
 
<head runat="server">
    <title>Untitled Page</title>
    <link type="text/css" href="_js/jquery.ui.all.css" rel="stylesheet" />
    <script type="text/javascript" src="../_js/jquery-1.4.2.js"></script>
    <script type="text/javascript" src="_js/jquery.ui.core.js"></script>
    <script type="text/javascript" src="_js/jquery.ui.mouse.js"></script>
    <script type="text/javascript" src="_js/jquery.ui.sortable.js"></script>
    <script type="text/javascript" src="_js/jquery.ui.widget.js"></script>
    <script type="text/javascript">
            $(function() {
		        $("#questions").sortable();
		        $("#questions").disableSelection();
	});
 
        </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ul id="questions">
 
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
 
 
</ul>
 
    </div>
    </form>
</body>

04/05/2010, 19h53
SpaceFrog

si tu lances les ofcntions avant les instanciations d'objets ..

regarde du coté de document ready
04/05/2010, 20h22
dragazor
Citation:

Envoyé par SpaceFrog

si tu lances les ofcntions avant les instanciations d'objets ..

regarde du coté de document ready

Oui effectivement, j'ai rajouté juste après avoir posté tout à l'heure.
en faite ca donne ca.
Code:

1 2 3 4 5 6 7 8 9 <script type="text/javascript"> $(document).ready( $(function() { $("#questions").Sortable(); //$("#questions").SisableSelection(); }) ); </script>
D'après ce que j'en ai compris le document ready sert a lancer la fonction lorsque la page est chargé du style [I]onload[I] pour le <body>.

Mais ca ne résout pas mes problèmes.
Si tu peux m'aider...
04/05/2010, 20h32
dragazor
Citation:

Envoyé par SpaceFrog

si tu lances les ofcntions avant les instanciations d'objets ..

regarde du coté de document ready

Aussi, J'ai fait un alert mais il ne s'affiche jamais donc je ne rentre jamais dans la fonction
Code:

1 2 3 4 $(function(){ alert("rentré dans la fonction"); $("#questions").Sortable();

Bonsoir.

Je pense que vous essayez d'utiliser le widget Sortable sans avoir jQuery UI au complet ! Il y a beaucoup d'interdépendances entre les différents widgets qui composent UI, il est préférable de charger la totalité.

Voir http://jqueryui.com/download

Exemple :

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<meta name="description" content="Page type">
	<title>Page type</title>
	<link rel="stylesheet" type="text/css" href="../lib/jqueryui/css/humanity/jquery-ui-1.8.1.custom.css">	
	<style>
		/* BASE */
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}		
		div#affiche {
			margin:12px;
			padding:6px;
			border:1px solid #999999;
			background-color:#FFFFFF;
			color:#000000;
		}
 
		/* TEST */
		#sortable {list-style-type: none; margin: 0; padding: 0; width: 60%; }
		#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
		#sortable li span { position: absolute; margin-left: -1.3em; }
	</style>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-ui-1.8.1.custom.min.js"></script>
 	<script>
		$(function(){
			$("#sortable").sortable().disableSelection();
		});
	</script>
</head>
<body>
	<div id="conteneur">
 
		<ul id="sortable">
			<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
			<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
			<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
			<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
			<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
			<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
			<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
		</ul>
 
	</div>
</body>  
</html>