mise en place de sortable

**dragazor** · 04/05/2010, 18h17

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 :

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

**SpaceFrog** · 04/05/2010, 19h53

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

regarde du coté de document ready

**dragazor** · 04/05/2010, 20h22

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 :

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

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

**dragazor** · 04/05/2010, 20h32

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 :

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

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

**danielhagnoul** · 08/05/2010, 01h05

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 :

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

mise en place de sortable

jQuery

Vue hybride

Discussions similaires

Partager

Partager