lien avec drag&drop

**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 ?

lien avec drag&drop

JavaScript

Vue hybride

Discussions similaires

Partager

Partager