Draggable et droppable sur un tableau

Bonjour à toutes et à tous,

Je souhaiterai effectuer un draggable et un droppable sur les lignes d'un tableau. Le tableau est vide à l'initialisation du script, les lignes du tableau sont alimentées lors de l'ajout d'un processus via un champ de type texte.

Voici mon code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
		// action de draggable and sortable sur les lignes de processus
		$(function() {
			$( "table.plain > tbody > tr" ).sortable({
				revert: true
			});
			$( "tr" ).draggable({
				connectToSortable: "#sortable",
				helper: "clone",
				revert: "invalid"
			});
 
		});

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
 
<!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" />
 
<!-- inclusion des fichiers javascript -->
<script type="text/javascript" src="js/jquery-1.7.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.3.custom.min.js"></script>
<script type="text/javascript" src="js/ui.dialog.js"></script>
<script type="text/javascript" src="js/ui.draggable.js"></script>
<script type="text/javascript" src="js/ajouterProcess.js"></script>
<script type="text/javascript" src="js/validerProcess.js"></script>
 
 
<!-- inclusion des feuilles de style css -->
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.7.3.custom.css"/>
<link rel="stylesheet" type="text/css" href="css/ui.dialog.css"/>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/type.css" />
<link rel="stylesheet" type="text/css" href="css/tables.css" />
<link rel="stylesheet" type="text/css" href="css/forms.css" />
<link rel="stylesheet" type="text/css" href="css/helpers.css" />
<link rel="stylesheet" type="text/css" href="css/ux.css" />
 
<title>Projet de listing des processus</title>
</head>
<body>
 
<div id="container">	
 
<div class="warning" style="display: none;">
	<p >Vous avez supprimé un processus métier de la liste !</p>
	<div></div>
</div> 
 
<div class="warning_modif" style="display: none;">
	<p >Vous avez modifié un processus métier de la liste !</p>
	<div></div>
</div> 
 
<table class="plain">
   <caption>
      indicateur de processus 
   </caption>
   <thead>
      <tr>
         <th scope="col">Actions 1</th>
         <th scope="col">Nom du processus </th>
         <th scope="col">Etat du processus</th>
         <th scope="col">Actions 2</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <td></td>
         <td>* processus m&eacute;tiers</td>
         <td>* status des processus</td>
         <td>* changer le status</td>
      </tr>
   </tfoot>
   <tbody class="inner">
		<tr id=sortable></tr>
   </tbody>
</table><!-- table#sort -->
 
<div class="error" style="display: none;">
   <p >Veuillez donner un nom de plus de 6 caractères à votre processus métier.</p>
   <div></div>
</div> <!-- div.error -->
 
<div class="linecontainer">
	<table>
		<tr>
			<td>				
				<a href="#" id="ajouter">
					<img src="img/icons/icon-ajouter.png" title="ajouter un processus" />
				</a>
			</td>
			<td>
				<form id="ajouterProcess" style="padding-left:5px; display: none;" >
					<input type="text" id="nom" class="requiredfield" size="31" maxlength="41"/>				
					<input type="image" id="valider" src="img/icons/icon-ok.png"  title="valider le processus" align="middle"/>
				</form> <!-- form#ajouterProcess -->
			</td>
		</tr>
	</table><!-- table -->
 
</div><!-- div.linecontainer -->
 
<!-- affichage du block message d'erreur -->
<div id="dialog" title = "Edition du processus" style="display: none;">
	<p id="validateTips" style="text-align: center; font-weight: bold; margin: 0em" >NOM DU PROCESSUS</p>
 
	<!-- formulaire de la boite de dialogue d'édition du nom du processus -->
	<form id="formDialog">
	<fieldset>
		<input type="text" style="margin-left: 30px;" name="nomProcess" id="nomProcess" class="text ui-widget-content ui-corner-all" size="24"/>
	</fieldset>
	</form><!-- form#dialogForm -->
</div><!-- div#errorDialog -->
 
</div><!-- div.container -->
</body>
</html>

Merci d'avance.
Transact.