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...
Merci d'avance !

Je vous invite à tester par vous-même.

http://corrupt-kingdoms.com/inv/craft0.php

Voici mon code HTML :

Code html : 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
<!--- 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 : 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
$(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);
});
});