Tester les valeurs avec drag&drop jQuery

Bonjour,

je suis actuellement étudiant en informatique et j'essaie de faire des interactions entre deux tableaux en utilisant du drag&drop.

J'ai réussi à faire les déplacements pour l'instant et a rentrer des valeurs du tableau de gauche dans celui de droite.

Cependant, j'aimerais faire des tests sur ces valeurs pour que les valeurs déplacés soit :

1/remises dans leur cellules d'origine si elles sont inferieurs à la valeur qui existe déjà dans la case destination

2/ remplace ou s'ajoute à la valeur qui existe déjà si elle est supérieur

Voilà ce que j'ai pour le moment, le code n'est pas très long c'est simplement pour les tests ;)

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
106
107
108
109
110
111
112
113
114
115
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Je débute en jQuery</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
		<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/smoothness/jquery-ui.css" />
		<link rel="stylesheet" type="text/css" href="test.css" />
 
		<script type="text/javascript">
			jQuery(document).ready(function($){
				$(".type1").draggable();
				$(".type2").draggable();
				$(".type3").draggable();
 
 
				$( ".type4" ).droppable({
					accept: ".type1",
					drop: function( event, ui ) {
						ui.draggable.appendTo( $(this) )
							.css({
								left: '0px',
								top:  '0px'
							})
							.draggable({ containment: 'parent' });
					}
				});
 
				$( ".type5" ).droppable({
					accept: ".type2",
					drop: function( event, ui ) {
						ui.draggable.appendTo( $(this) )
							.css({
								left: '0px',
								top:  '0px'
							})
							.draggable({ containment: 'parent' });
					}
				});
 
				$( ".type6" ).droppable({
					accept: ".type3",
					drop: function( event, ui ) {
						ui.draggable.appendTo( $(this) )
							.css({
								left: '0px',
								top:  '0px'
							})
							.draggable({ containment: 'parent' });
					}
				});
			});
		</script>
	</head>
 
	<body>
 
 
			<div id="blocGauche">
				<table rules=all>
					<tr>
						<td><p id="A" class="type1">15</p></td>
						<td><p id="B" class="type2">16</p></td>
						<td><p id="C" class="type3">17</p></td>
					</tr>
					<tr>
						<td rowspan="2"><p id="A" class="type1">24</p></td>
						<td>
							<p id="B1" class="type2">28</p>
						</td>
						<td rowspan="2"><p id="C" class="type3">530</p></td>
					</tr>
					<tr>
						<td>
							<p id="B2" class="type2">48</p>
						</td>
					</tr>
					<tr>
						<td><p id="A" class="type1">16</p></td>
						<td><p id="B" class="type2">1024</p></td>
						<td><p id="C" class="type3">31</p></td>
					</tr>
				</table>
			</div>
 
			<div id="blocDroit">
				<table rules=all>
					<tr>
						<td><p id="A" class="type4">42</p></td>
						<td><p id="B" class="type5">56</p></td>
						<td><p id="C" class="type6">73</p></td>
					</tr>
					<tr>
						<td rowspan="2"><p id="A" class="type4">1</p></td>
						<td>
							<p id="B1" class="type5">228</p>
						</td>
						<td rowspan="2"><p id="C" class="type6">12</p></td>
					</tr>
					<tr>
						<td>
							<p id="B2" class="type5">4</p>
						</td>
					</tr>
					<tr>
						<td><p id="A" class="type4">98</p></td>
						<td><p id="B" class="type5">76</p></td>
						<td><p id="C" class="type6">81</p></td>
					</tr>
				</table>
			</div>	
 
 
	</body>
</html>

et les css :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
body{
	background-color : grey;
}
 
table{
	border : 2px solid red;
	float : left;
	margin : 10px;
	text-align : center;
}
 
td{
	border-color : black;
}

Quelqu'un a une idée pour me débloquer SVP ?

Je vous remercie d'avance ;)