lien avec drag&drop [Résolu]

hellotk · 21/03/2011, 18h06

Bonjour à tous,

je rencontre un problème lié au drag&drop :

j'ai sur ma page plusieurs DIV (contenant des photos) dont la fonction drag&drop est appelée par javascript.
Jusque là tout va bien...
Or, lorsque je place un lien sur l'image contenue dans une DIV,
la fonction drag&drop ne fonctionne plus.

Je cherche une solution qui me permette par exemple d'atteindre mon lien par double-click pour que la fonction drag&drop soit conservée.
Petite précision; le lien de l'image appelle un lightbox en javascript (et non un lien externe).

J'ai donc le code suivant;

mon drag&drop en javascript:

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
 
function positionne(p_id, p_posX, p_pos_Y){
document.getElementById(p_id).style.left = p_posX;
document.getElementById(p_id).style.top = p_pos_Y;
}
function getPositionCurseur(e){
//ie
if(document.all){
curX = event.clientX;
curY = event.clientY;
}
 
//netscape 4
if(document.layers){
curX = e.pageX;
curY = e.pageY;
}
 
//mozilla
if(document.getElementById){
curX = e.clientX;
curY = e.clientY;
}
}
 
function beginDrag(p_obj,e){
isDragging = true;
objectToDrag = p_obj;
getPositionCurseur(e);
ecartX = curX - parseInt(objectToDrag.style.left);
ecartY = curY - parseInt(objectToDrag.style.top);
}
 
function drag(e){
var newPosX;
var newPosY;
if(isDragging == true){
 
getPositionCurseur(e);
newPosX = curX - ecartX;
newPosY = curY - ecartY;
 
objectToDrag.style.left = newPosX + 'px';
objectToDrag.style.top = newPosY + 'px';
 
}
}
function endDrag(){
isDragging = false;
}

et dans mon html :

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
 
<head>
<script type="text/javascript" src="lightbox.js"></script>
</head>
<body onmousemove="drag(event);">
<div id="img" onmousedown="beginDrag(this,event);" onmouseup="endDrag();">
<a href="image2.jpg" rel="lightbox">
<img src="image1.jpg" width="70" height="99"/>
</a>
</div>
<script type="text/javascript">
positionne('img', '290px', '84px');
isDragging = false;
</script>
</body>

PS: vous aurez compris que je ne suis pas un foudre de guerre en programmation, je suis photographe de formation

javatwister · 21/03/2011, 18h17

en fait, si le lien n'en est pas un... vraiment, utilise un autre type de déclencheur neutre (div) parce que dragger un lien, c'est sûr que ça ne doit pas être facile;

nadox · 21/03/2011, 18h27

Bonjour,

Le problème n'est pas simple à résoudre.
En fait, lightbox se déclenche lorsqu'on clique sur le lien.
Le drag, lui, se déclenche lorsqu'on clique sur la div.
Le problème est le suivant : le lien est contenu dans la div, et lorsqu'on clique, on clique avant tout sur le lien...
Le drag ne pourra jamais se faire avant lightbox...
La solution la plus simple consisterait à ne plus faire le drag/drop directement sur l'image, mais sur une 'poignée' à coté...(une grosse bordure, qui serait en fait une autre div par exemple)
Je conviens cependant que ce n'est ni très esthétique, ni très ergonomique...

hellotk · 22/03/2011, 07h49

oui en effet j'y ai pensé mais je voulais savoir s'il n'y avait pas une solution pour combiner les deux....

Même en assignant un double-click (au lieu d'un click simple) au lien de l'image il y aurait le même problème ?

hellotk · 22/03/2011, 08h17

En cherchant sur le net, j'ai trouvé ce site : http://www.1-2-3-info.se/ c'est à peur prés l'effet de double-click que je souhaiterais avoir (en plus simple évidemment)

Billy KiT · 22/03/2011, 11h35

Salut, peut-être une idée :
Sur ton lien (div), si la souris (ou le div parent) n'a pas bougé entre le mousedown et mouseup => déclencher le lien, sinon => drop.
La fonction endDrag() peut par exemple renvoyer vrai si la souris a bougé sinon faux.
Cependant, je ne sais pas si c'est possible de gérer les lightbox autrement qu'avec des liens <a>, en Javascript ?

hellotk · 22/03/2011, 12h23

oui en effet ça serait une solution, mais pareil je ne sais pas s'il y a d'autres possibilités de liens...

hellotk · 22/03/2011, 12h27

Et puis je crains que le lien se déclenche de toute façon sur le onmousedown

nadox · 22/03/2011, 13h45

Lightbox fonctionne de la façon suivante :

- Lorsque la page est chargée, il parcoure le DOM
- Dans le DOM, il cherche tous les liens contenant une image et ayant l'attribut

Code :

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

rel="lightbox"

- Chaque élément trouvé est stocké dans un tableau javascript
- Chaque lien trouvé se voit attribuer un gestionnaire d'évènement sur le click(onmousedown) qui déclenche l'affichage en fenêtre modale.

Il faudrait donc modifier le fonctionnement de lightbox afin de "court-circuiter" le gestionnaire d'évènement et gérer l'affichage de la fenêtre modale dans un gestionnaire d'évènement personnalisé.

Ce n'est pas impossible, mais je ne crois pas que ça soit évident à faire sans bien connaître javascript...

Billy KiT · 22/03/2011, 14h19

Autocitation :

Citation:

Envoyé par Billy KiT

Salut, peut-être une idée :
Sur ton lien (div), si la souris n'a pas bougé entre le mousedown et mouseup => déclencher le lien, sinon => drop.

J'ai fait un test , ça fonctionne parfaitement bien avec <div onmouseup="...> au lieu de <a href="...>.
Le probleme réside dans l'attribut "rel" pour la gestion des lightbox ...

hellotk · 22/03/2011, 15h20

oui je crois que c'est un peu ambitieux,

merci de votre réactivité en tout cas

hellotk · 22/03/2011, 18h49

J'ai la solution,

Le lien se déclenche tout simplement sur le click qui précède le double-clic.
La solution consiste donc à désactiver le clic avant de transformer le click en double-clic. Ce qui donne dans la fonction initLightbox :

Code :

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

1
2
3
4
5
6
 
for (var i=0; i<anchors.length; i++){
	var anchor = anchors[i];
	if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == "lightbox")){
	    	anchor.onclick = function () {return false;}
		anchor.ondblclick = function () {showLightbox(this); return false;}

Pour le drag and drop, ajouter une class drag avec une position relative sur les éléments mobiles,
on a donc :

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
 
<head>
<style type="text/css">
.drag {display:block;position:relative;border:0;}
img {display:block}
</style>
</head>
<script type="text/javascript" src="lightbox.js"></script>
<script type="text/javascript">
function positionne(p_id, p_posX, p_pos_Y){
	document.getElementById(p_id).style.left = p_posX;
	document.getElementById(p_id).style.top = p_pos_Y;
}
var dragobject={
	x:0, y:0, offsetx:null,offsety:null,targetobj:null,dragapproved:0,
	initialize:function(){
		document.onmousedown=this.drag
		document.onmouseup=function(){this.dragapproved=0}}
	,drag:function(e){
		var evtobj=window.event? window.event:e
		this.targetobj=window.event? event.srcElement:e.target
		while (this.targetobj.className!="drag" && this.targetobj.tagName!="BODY") this.targetobj=this.targetobj.parentNode
		if (this.targetobj.className=="drag"){
			this.dragapproved=1
			if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
			if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
			this.offsetx=parseInt(this.targetobj.style.left)
			this.offsety=parseInt(this.targetobj.style.top)
			this.x=evtobj.clientX
			this.y=evtobj.clientY
			if (evtobj.preventDefault) evtobj.preventDefault()
			document.onmousemove=dragobject.moveit}}
	,moveit:function(e){
		var evtobj=window.event? window.event:e
		if (this.dragapproved==1){
			this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"
			this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"
		return false}}
}
dragobject.initialize()
</script>
<body>
<div id="idm" class="drag">
<a href="98.jpg" rel="lightbox"><img src="98.jpg" width="70" height="99"/></a>
</div>
<script type="text/javascript">
	positionne('idm','290px','84px');
</script>
</body>

hellotk · 22/03/2011, 20h16

d'ailleurs cela m'emmène à vous poser une autre question;

Quel est le code à ajouter pour modifier le z-index de mes divs lorsqu'elles sont sélectionnées, de façon à ce qu'elles passent automatiquement au premier plan ?

en sachant que mon script drag&drop est le suivant:

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
 
var dragobject={
	x:0, y:0, offsetx:null,offsety:null,targetobj:null,dragapproved:0,
	initialize:function(){
		document.onmousedown=this.drag
		document.onmouseup=function(){this.dragapproved=0}}
	,drag:function(e){
		var evtobj=window.event? window.event:e
		this.targetobj=window.event? event.srcElement:e.target
		while (this.targetobj.className!="drag" && this.targetobj.tagName!="BODY") this.targetobj=this.targetobj.parentNode
		if (this.targetobj.className=="drag"){
			this.dragapproved=1
			if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
			if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
			this.offsetx=parseInt(this.targetobj.style.left)
			this.offsety=parseInt(this.targetobj.style.top)
			this.x=evtobj.clientX
			this.y=evtobj.clientY
			if (evtobj.preventDefault) evtobj.preventDefault()
			document.onmousemove=dragobject.moveit}}
	,moveit:function(e){
		var evtobj=window.event? window.event:e
		if (this.dragapproved==1){
			this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"
			this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"
		return false}}
}
dragobject.initialize()
 
 
function positionne(p_id, p_posX, p_pos_Y){
document.getElementById(p_id).style.left = p_posX;
document.getElementById(p_id).style.top = p_pos_Y;
}

nadox · 22/03/2011, 21h03

Bonsoir,

Je ne comprends plus très bien quel est ton code pour le drag&drop...

Tu as résolu très vite ton premier problème finalement !

hellotk · 22/03/2011, 21h36

le code n'est pas de moi je l'ai pris sur le net

peut-être n'est-ce pas là que je dois modifier le z-index de mes divs

nadox · 22/03/2011, 21h43

Je ne sais pas quel code tu utilise finalement, mais l'idée est de positionner le z-index le plus élevé sur le début du drag, et de le remettre à une valeur plus basse sur le drop.

On peut positionner le z-index en javascript avec :

Code :

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

1
2
 
elem.style.zIndex=2011;

La meilleure solution est surement d'utiliser une classe CSS "par défaut" avec un z-index plus bas qu'une autre classe que tu applique sur le drag

hellotk · 23/03/2011, 09h24

ok je vais essayer ça

merci !

hellotk · 23/03/2011, 09h59

voici ce que j'ai fais :

j'ai placé le zIndex dans mon javascript :

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
 
var dragobject={
	x:0, y:0, offsetx:null,offsety:null,targetobj:null,dragapproved:0,
	initialize:function(){
		document.onmousedown=this.drag
		document.onmouseup=function(){this.dragapproved=0;}}
 
	,drag:function(e){
		var evtobj=window.event? window.event:e
		this.targetobj=window.event? event.srcElement:e.target
		while (this.targetobj.className!="drag" && this.targetobj.tagName!="BODY") this.targetobj=this.targetobj.parentNode
		if (this.targetobj.className=="drag"){
			this.dragapproved=1;
			this.targetobj.style.zIndex='999';
			if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
			if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
			this.offsetx=parseInt(this.targetobj.style.left)
			this.offsety=parseInt(this.targetobj.style.top)
			this.x=evtobj.clientX
			this.y=evtobj.clientY
			if (evtobj.preventDefault) evtobj.preventDefault()
			document.onmousemove=dragobject.moveit}}
 
	,moveit:function(e){
		var evtobj=window.event? window.event:e
		if (this.dragapproved==1){
			this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"
			this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"
		return false}}
}
dragobject.initialize()
}
 
function positionne(p_id, p_posX, p_pos_Y){
document.getElementById(p_id).style.left = p_posX;
document.getElementById(p_id).style.top = p_pos_Y;
}

et dans mon body :

Code :

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

1
2
3
4
5
6
7
8
9
 
<body onmousemove="drag(event);">
<div id="img1" class="drag" onmousedown="beginDrag(this,event);" onmouseup="endDrag();"><a href="image.jpg" rel="lightbox" style="z-index:0;"></a></div>
<div id="img2" class="drag" onmousedown="beginDrag(this,event);" onmouseup="endDrag();"><a href="image2.jpg" rel="lightbox" style="z-index:0;"></a></div>
<script type="text/javascript">
			positionne('img1', '290px', '84px');
			positionne('img2', '140px', '310px');
</script>
</body>

mais ça n'a pas l'air de marcher...

Billy KiT · 23/03/2011, 23h22

Tant qu'à insister, autant aller jusqu'au bout !

Voici donc ton code modifié qui fonctionne
- Je clique sans déplacer, le lien s'ouvre
- Je déplace, le lien ne s'ouvre pas

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.drag {display:block;position:relative;border:0;}
img {display:block}
</style>
</head>
<script type="text/javascript" src="lightbox.js"></script>
<script type="text/javascript">
function positionne(p_id, p_posX, p_pos_Y){
	document.getElementById(p_id).style.left = p_posX;
	document.getElementById(p_id).style.top = p_pos_Y;
}
 
/*-- pour calcul deplacement entre mousedown et mouseup --*/
function sqr(a) { 
    return a*a; 
} 
 
function distance(x1, y1, x2, y2) { 
    return Math.sqrt(sqr(y2 - y1) + sqr(x2 - x1)); 
} 
 
function deplacement(p_id) {
	x = parseInt(p_id.style.left);
	y = parseInt(p_id.style.top);
	return distance(x,y,posX,posY);
}
/*------*/
 
var dragobject={
	x:0, y:0, offsetx:null,offsety:null,targetobj:null,dragapproved:0,
	initialize:function(){
		document.onmousedown=this.drag;
		document.onmouseup=function(){this.dragapproved=0; 
			/*-- si le deplacement < 3 px ouvre lightbox --*/
			if (deplacement(this.targetobj)<3) showLightbox(document.getElementById('monImage'));
			/*------*/}}
	,drag:function(e){
		var evtobj=window.event? window.event:e
		this.targetobj=window.event? event.srcElement:e.target
		while (this.targetobj.className!="drag" && this.targetobj.tagName!="BODY") this.targetobj=this.targetobj.parentNode
		if (this.targetobj.className=="drag"){
			this.dragapproved=1
			if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
			if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
			this.offsetx=parseInt(this.targetobj.style.left)
			this.offsety=parseInt(this.targetobj.style.top)
			this.x=evtobj.clientX
			this.y=evtobj.clientY
			if (evtobj.preventDefault) evtobj.preventDefault()
			document.onmousemove=dragobject.moveit}
 
			/*-- enregistre position au moment du mousedown --*/
			posX = parseInt(this.targetobj.style.left);
			posY = parseInt(this.targetobj.style.top);
			/*------*/
			}
	,moveit:function(e){
		var evtobj=window.event? window.event:e
		if (this.dragapproved==1){
			this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"
			this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"
		return false}}
}
dragobject.initialize()
</script>
<body>
<div id="idm" class="drag"><img src="98.jpg" width="70" height="99"/>
<!-- astuce : l'image est sortie de la balise <a> -->
<a href="image.jpg" rel="lightbox" id="monImage"></a>
</div>
<script type="text/javascript">
	positionne('idm','290px','84px');
</script>
</body>
</html>

Têtu le bougre ....

hellotk · 24/03/2011, 09h55

Merci mais ce problème je l'ai résolu

mon problème réside maintenant sur la gestion du zIndex que j'ai résolu en partie, voici ce que j'ai fais;

Dans la fonction drag, appelée au début du déplacement, lorsque j'ai « attrapé » le container de class drag, j'ai modifié le zIndex :

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
 
var dragobject={
	x:0, y:0, offsetx:null,offsety:null,targetobj:null,dragapproved:0,
	initialize:function(){
		document.onmousedown=this.drag
		document.onmouseup=function(){this.dragapproved=0; this.targetobj.style.zIndex='90';}}//revenir à la valeur initiale en fin de deplacement
	,drag:function(e){
		var evtobj=window.event? window.event:e
		this.targetobj=window.event? event.srcElement:e.target
		while (this.targetobj.className!="drag" && this.targetobj.tagName!="BODY") this.targetobj=this.targetobj.parentNode
		if (this.targetobj.className=="drag"){
			this.dragapproved=1;
			this.targetobj.style.zIndex='999';//ajout
			if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
			if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
			this.offsetx=parseInt(this.targetobj.style.left)
			this.offsety=parseInt(this.targetobj.style.top)
			this.x=evtobj.clientX
			this.y=evtobj.clientY
			if (evtobj.preventDefault) evtobj.preventDefault()
			document.onmousemove=dragobject.moveit}}

mon soucis c'est que je ne parviens pas à "forcer" l'image à venir au premier plan lorsque l'on drope.
Car dans cet exemple, une foi relâchée , celle-ci se repositionne en arrière plan

21/03/2011, 18h17	#2
javatwister Expert Confirmé danseur Inscription : août 2003 Messages : 2 667 Détails du profil Informations personnelles : Sexe : Localisation : France, Calvados (Basse Normandie) Informations professionnelles : Activité : danseur Informations forums : Inscription : août 2003 Messages : 2 667 Points : 3 035 Points : 3 035	en fait, si le lien n'en est pas un... vraiment, utilise un autre type de déclencheur neutre (div) parce que dragger un lien, c'est sûr que ça ne doit pas être facile; __________________ On ne mord pas, on manifeste seulement notre tristesse face à des exposés de situations qui défient notre entendement binaire.
	00

21/03/2011, 18h27	#3
nadox Membre expérimenté Développeur Inscription : février 2010 Messages : 360 Détails du profil Informations personnelles : Sexe : Localisation : France, Calvados (Basse Normandie) Informations professionnelles : Activité : Développeur Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : février 2010 Messages : 360 Points : 545 Points : 545	Bonjour, Le problème n'est pas simple à résoudre. En fait, lightbox se déclenche lorsqu'on clique sur le lien. Le drag, lui, se déclenche lorsqu'on clique sur la div. Le problème est le suivant : le lien est contenu dans la div, et lorsqu'on clique, on clique avant tout sur le lien... Le drag ne pourra jamais se faire avant lightbox... La solution la plus simple consisterait à ne plus faire le drag/drop directement sur l'image, mais sur une 'poignée' à coté...(une grosse bordure, qui serait en fait une autre div par exemple) Je conviens cependant que ce n'est ni très esthétique, ni très ergonomique...
	00

22/03/2011, 07h49	#4
hellotk Invité de passage Inscription : octobre 2007 Messages : 32 Détails du profil Informations forums : Inscription : octobre 2007 Messages : 32 Points : 2 Points : 2	oui en effet j'y ai pensé mais je voulais savoir s'il n'y avait pas une solution pour combiner les deux.... Même en assignant un double-click (au lieu d'un click simple) au lien de l'image il y aurait le même problème ?
	00

22/03/2011, 08h17	#5
hellotk Invité de passage Inscription : octobre 2007 Messages : 32 Détails du profil Informations forums : Inscription : octobre 2007 Messages : 32 Points : 2 Points : 2	En cherchant sur le net, j'ai trouvé ce site : http://www.1-2-3-info.se/ c'est à peur prés l'effet de double-click que je souhaiterais avoir (en plus simple évidemment)
	00

22/03/2011, 11h35	#6
Billy KiT Membre du Club Inscription : mars 2011 Messages : 47 Détails du profil Informations forums : Inscription : mars 2011 Messages : 47 Points : 59 Points : 59	Salut, peut-être une idée : Sur ton lien (div), si la souris (ou le div parent) n'a pas bougé entre le mousedown et mouseup => déclencher le lien, sinon => drop. La fonction endDrag() peut par exemple renvoyer vrai si la souris a bougé sinon faux. Cependant, je ne sais pas si c'est possible de gérer les lightbox autrement qu'avec des liens <a>, en Javascript ?
	00

22/03/2011, 12h23	#7
hellotk Invité de passage Inscription : octobre 2007 Messages : 32 Détails du profil Informations forums : Inscription : octobre 2007 Messages : 32 Points : 2 Points : 2	oui en effet ça serait une solution, mais pareil je ne sais pas s'il y a d'autres possibilités de liens...
	00

22/03/2011, 12h27	#8
hellotk Invité de passage Inscription : octobre 2007 Messages : 32 Détails du profil Informations forums : Inscription : octobre 2007 Messages : 32 Points : 2 Points : 2	Et puis je crains que le lien se déclenche de toute façon sur le onmousedown
	00

22/03/2011, 13h45	#9
nadox Membre expérimenté Développeur Inscription : février 2010 Messages : 360 Détails du profil Informations personnelles : Sexe : Localisation : France, Calvados (Basse Normandie) Informations professionnelles : Activité : Développeur Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : février 2010 Messages : 360 Points : 545 Points : 545	Lightbox fonctionne de la façon suivante : - Lorsque la page est chargée, il parcoure le DOM - Dans le DOM, il cherche tous les liens contenant une image et ayant l'attribut Code : Sélectionner tout - Visualiser dans une fenêtre à part rel="lightbox" - Chaque élément trouvé est stocké dans un tableau javascript - Chaque lien trouvé se voit attribuer un gestionnaire d'évènement sur le click(onmousedown) qui déclenche l'affichage en fenêtre modale. Il faudrait donc modifier le fonctionnement de lightbox afin de "court-circuiter" le gestionnaire d'évènement et gérer l'affichage de la fenêtre modale dans un gestionnaire d'évènement personnalisé. Ce n'est pas impossible, mais je ne crois pas que ça soit évident à faire sans bien connaître javascript...
	00

22/03/2011, 15h20	#11
hellotk Invité de passage Inscription : octobre 2007 Messages : 32 Détails du profil Informations forums : Inscription : octobre 2007 Messages : 32 Points : 2 Points : 2	oui je crois que c'est un peu ambitieux, merci de votre réactivité en tout cas
	00

22/03/2011, 21h03	#14
nadox Membre expérimenté Développeur Inscription : février 2010 Messages : 360 Détails du profil Informations personnelles : Sexe : Localisation : France, Calvados (Basse Normandie) Informations professionnelles : Activité : Développeur Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : février 2010 Messages : 360 Points : 545 Points : 545	Bonsoir, Je ne comprends plus très bien quel est ton code pour le drag&drop... Tu as résolu très vite ton premier problème finalement !
	00

22/03/2011, 21h36	#15
hellotk Invité de passage Inscription : octobre 2007 Messages : 32 Détails du profil Informations forums : Inscription : octobre 2007 Messages : 32 Points : 2 Points : 2	le code n'est pas de moi je l'ai pris sur le net peut-être n'est-ce pas là que je dois modifier le z-index de mes divs
	00

23/03/2011, 09h24	#17
hellotk Invité de passage Inscription : octobre 2007 Messages : 32 Détails du profil Informations forums : Inscription : octobre 2007 Messages : 32 Points : 2 Points : 2	ok je vais essayer ça merci !
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email