Discussion :

[marcbon]

Bonjour,

J'utilise ce code javascript pour un drag n drop de plusieurs images (il fonctionne trés bien).

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
<script type="text/javascript">
    //Lire le cookie
    function posImg()
    {    if (document.cookie)
        {   var adr=document.cookie.split("_");
            
            document.getElementById("dessin").style.left=adr[0];
			        }
    }
	


	
	var DRAG_Objet = null;
var O_Drag = new Object();
var Zindex = 6;
//-- Definition zone de DRAG
var W_Top    = 500;
var W_Left   = 2;
var W_Right  = 1050;
var W_Bottom = 17;
//--------------------------
function isDRAG_Objet( obj_){
  while( obj_){
    var szClass = obj_.className;
    if( szClass)
      
        return( obj_)
    obj_ = obj_.parentNode;
  }
  return( null);
}
//Création du cookie
function DRAG_Stop(){
  
  var da = new Date();
        var d = new Date( Date.parse(da) + ( 1000*60*60*24*365 ) );
        document.cookie = DRAG_Objet.style.left +" " + DRAG_Objet.style.bottom +";expires=" + d.toGMTString() + ";" ;
	DRAG_Objet=null;

}
//-------------------
function DRAG_Move(e){
  if( DRAG_Objet){
    if( e) event = e;
    //-- Position d'affichage
    var PosX = event.clientX +O_Drag.left -O_Drag.clic_X;
    var PosY = event.clientY +O_Drag.top -O_Drag.clic_Y;
	
    //-- Test si dans Zone
    if( PosX > W_Left)
      if(( PosX +O_Drag.width) < W_Right)
        DRAG_Objet.style.left = PosX +"px";
    if( PosY > W_Top)
      if(( PosY +O_Drag.height) < W_Bottom)
        DRAG_Objet.style.top  = PosY +"px";
		
    return false;
  }
}
//--------------------
function DRAG_Start(e){
  var Obj = e? e.target : event.srcElement;
  //-- Test si Objet dragable
  if(( Obj = isDRAG_Objet( Obj))){
    if( e) event = e;
    DRAG_Objet = Obj;
    //-- Recup Info sur objet
    O_Drag.width  = Obj.offsetWidth;
    O_Drag.height = Obj.offsetHeight;
    O_Drag.left   = Obj.offsetLeft;
    O_Drag.top    = Obj.offsetTop;
	
    //-- Position du click de depart
    O_Drag.clic_X = event.clientX;
    O_Drag.clic_Y = event.clientY;
    
    return false;
  }
}
//-- Evenement sur Mousedocument.onmousedown = DRAG_Start;
document.onmouseup   = DRAG_Stop;
document.onmousemove = DRAG_Move;
</script>

La boucle PHP pour afficher mes images en fonction d'un nombre :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$aff = 1;
 
 
while ($aff<= $reponse ['nplante1'])
{
?>
<div onload="posImg();"  class="s" style="cursor: move;position:absolute;left:0;bottom:17;z-index:6;">
<img src=/poisson/images/animal/<?php echo $reponse ['pla1']?> name="pa" >
</div>
<?php
$aff++;
}

Je souhaiterais que la position des images soient enregistrée dans un cookie.

Je sais faire pour une image, mais comment faire pour toutes les images.


Merci

[le_chomeur]

Salut
je te conseille , au moment du drop de récupérer la position de ton image et de la stocker dans un tableau ( associé au nom/id de l'image ) puis dans ton cookies d'affecter les valeurs NomImageX = valeur , NomImageY = valeur (au load tu n'auras plus qu'a parser )
a essayer , je n'ai pas l'habitude de manipuler des cookies

[marcbon]

Bonjour et merci.

Pourrais tu me donner un exemple car je ne connait pas le js.

Mon cookie contient :

exemple:

45px_367px
localhost/poisson/
xxxxxx
xxxxxx
xxxxxx
xxxxxx

Merci

un peu d'aide s'il vous plait

[le_chomeur]

Salut , alors pour parser tes coordonnées par exemple :
( je te laisse faire le traitement de récupération des infos du cookies ... )

Sois coord une variable contenant ta string : 45px_367px
var tabCoord = coord.split("_");
var CoordX = tabCoord[0]; //Vaut "45px";
var CoordY = tabCoord[1]; // vaut "367px"

voila j'espère avoir été clair ...

[marcbon]

Merci,

En fait j'arrive à lire mon cookie et positionner mon image.

Ce que je sais pas faire c'est récupérer les positions de toutes mes images affichées grace à la boucle php.