Utilisation de Drag and Drop
Bonjour à tous,
Je suis en train de réaliser un module de gestion d'inventaire en Drag and Drop avec JQuery. Malgré de longues lectures de la doc sur UI et de nombreux tests, je n'arrive pas à faire en sorte qu'une variable enregistre correctement ce qu'un slot contient.
Pour le moment, lorsqu'un item est droppé dans un slot, le contenu du dit-slot est enregistré dans un array (le but étant par après de pouvoir le sauvegarder dans ma base de donnée). Le problème c'est que quand l'item est déplacé d'un slot à un autre, l'enregistrement se fait mal et parfois l'item se retrouve à la fois dans plusieurs slots...
Ca ne doit pas être bien difficile à régler mais j'avoue que je suis un peu perdu... :aie:
Merci d'avance ! :D
Je vous invite à tester par vous-même. ;)
http://corrupt-kingdoms.com/inv/craft0.php
Voici mon code HTML :
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
| <!--- INVENTAIRE --->
<table id="INVENTORY" CELLSPACING="0" cellpadding="0">
<tr>
<td id="1" class="SLOT"></td>
<td id="2" class="SLOT"></td>
<td id="3" class="SLOT"></td>
<td id="4" class="SLOT"></td>
</tr>
</table><br><br><br>
<!--- ITEMS À POSITIONNER --->
<div id="ITEMS">
<div id="ITEM_01" class="ITEM"><img src="FOOD_01.png"></div>
<div id="ITEM_02" class="ITEM"><img src="MEAT_01.png"></div>
</div><br><br><br>
<!--- DETECTION DU CONTENU DE CHAQUE LOT --->
1 : <span id="INFO_1"></span><br>
2 : <span id="INFO_2"></span><br>
3 : <span id="INFO_3"></span><br>
4 : <span id="INFO_4"></span><br>
<!--- IMPORT JQUERY ET UI --->
<script src="JQ.js"></script>
<script src="UI.js"></script> |
Et mon code JQuery :
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
| $(document).ready(function(){
SLOT = new Array;
// SLOT[ID] = item contenu dans le slot id
$(".ITEM").draggable({
//containment : '.INV_BOX', // containment indique la zone ou l'objet est contraint à se déplacer
cursor: "pointer",
revert: "invalid",
revertDuration: 100,
snap: ".SLOT",
distance:35, //distance a laquelle ca commence a bouger
opacity:0.40,
});
$(".SLOT").droppable({
accept: ".ITEM",
tolerance: "fit", //dedans à fond, pas deborder
});
$( ".SLOT" ).on( "dropout", function( event, ui ){
// quand un item sort du slot
slot_id = this.id;
SLOT[slot_id]=0;
$("#INFO_"+slot_id).html("RIEN");
});
$( ".SLOT" ).on( "drop", function( event, ui ){
// quand un item est droppé dans le slot
slot_id = this.id;
});
$( ".ITEM" ).on( "dragstop", function( event, ui ){
// quand un item s'arrête quelque part
item_id = this.id;
SLOT[slot_id]=item_id;
$("#INFO_"+slot_id).html("Contient : "+item_id);
});
}); |
