Tester valeurs avec drag&drop jquery
paladice
-
paladice -
paladice -
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 ;)
et les css :
Quelqu'un a une idée pour me débloquer SVP ?
Je vous remercie d'avance ;)
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 ;)
<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 :
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 ;)
A voir également:
- Tester valeurs avec drag&drop jquery
- Flash drive tester - Télécharger - Divers Utilitaires
- Tester son pc - Guide
- Share drop - Télécharger - Téléchargement & Transfert
- Tester composant pc - Guide
- Tester disque dur - Télécharger - Informations & Diagnostic