Discussion :

[jagger00]

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);
});
});

[thunder75]

J'ai un peu regardé et j'ai trouvé ca comme solution

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
$(document).ready(function(){
	SLOT = new Array;
	var slot_id=-1;
	var item_pos_ancienne=-1;
	var item_id='';
	// 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( "drop", function( event, ui ) { // quand un item est droppé dans le slot
		slot_id = this.id;
		if(item_pos_ancienne!=-1) SLOT[item_pos_ancienne]=0;
		SLOT[slot_id]=item_id;
		$("#INFO_"+slot_id).html("Contient : "+item_id);
		$("#INFO_"+item_pos_ancienne).html("RIEN");
	});
	$( ".ITEM" ).on( "dragstart", function( event, ui ) { // debut déplacement d'un item
		item_id = this.id;
		if(SLOT.indexOf(item_id)!=-1) item_pos_ancienne=SLOT.indexOf(item_id);
	});
});

[jagger00]

Et bien franchement, astucieux !
Merci beaucoup pour ce coup de pouce !

Sujet résolu donc.

[danielhagnoul]

Bonsoir

Je viens de poster une nouvelle contribution : jQuery UI, l'élément droppable n'accepte qu'un seul élément draggable.