Tester les valeurs avec drag&drop jQuery

**paladice** · 03/04/2013, 17h24

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 :

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

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

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

**paladice** · 04/04/2013, 09h05

Je pense que ça se passe dans le jQuery pour les "if" et dans le HTML je dois surement ajouter un attribut "value" mais j'ai beau essayer plusieurs choses, je ne vois pas :/ toujours pas d'idées ?

Tester les valeurs avec drag&drop jQuery

jQuery

Vue hybride

Discussions similaires

Partager

Partager