Drag'n'Drop simple et Internet Explorer

Version imprimable

Bonjour,

Je cherche a rendre draggable un "div". Mon code ne fonctionne pas sous internet explorer. Quel qu'un a une idée.. un lien ?
(fonctionne sous FF2, Opera,Safari.. mais ni IE6, ni IE7)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<html>
       <head>
 
             <script type="text/javascript" src="js/prototype.js"></script>
             <script type="text/javascript" src="js/scriptaculous.js"></script>
            <script type="text/javascript" src="js/dragdrop.js"></script>
 
      </head>
      <body>
 
           <div id="test" style="cursor:pointer;"  >AAAAAA</div>
           <input type="button" onclick="new Draggable('test');" />
 
       </body>
</html>

Salut , sans vouloir réinventer la roue, voici un script que j'avais fait il y a un petit moment , qui n'est pas du tout intrusif ( c'est a dire qu'il ne pollue pas le reste du code ... )

Code:

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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>classe d'élement déplaçable</title>
<style type="text/css">
.boiteBleu{
background-color:#C1D8E8;
width:300px;
height:300px;
}
.boiterouge{
background-color:red;
width:150px;
height:150px;
}
.drag{
border:2px dashed #F1CEC5;
cursor:move;
}
</style>
<script type="text/javascript">
/*######################################
script permettant de rendre déplaçable
les éléments qui ont la classe définit
en paramètre
######################################*/
 
var classMove = "drag";
var myObjectClick = null;
var movable = false;
var positionXAtClick = null;
var positionYAtClick = null;
var positionXMyobjectClick = null;
var positionYMyobjectClick = null;
 
//Fonction permettant d'initialiser les listeners
function init_evenement(){
//On commence par affecter une fonction à chaque évènement de la souris
if(window.attachEvent){
document.onmousedown = start;
document.onmousemove = drag;
document.onmouseup = drop;
}
else{
document.addEventListener("mousedown",start, false);
document.addEventListener("mousemove",drag, false);
document.addEventListener("mouseup",drop, false);
}
 
}
 
//Fonction permettant de récupèrer l'objet sur lequel on a clické, et l'on récupère sa classe
function start(e){
//On initialise l'évènement s'il n'a aps été créé ( sous ie )
if(!e){
e = window.event;
}
//Détection de l'élément sur lequel on a clické
monElement = (e.target)? e.target:e.srcElement;
 
if(monElement)
{
//On appel la fonction permettant de récupèrer la classe de l'objet et assigner les variables
getClassDrag(monElement);
if(myObjectClick){
positionXAtClick = e.clientX;
positionYAtClick = e.clientY;
positionXMyobjectClick = parseInt(myObjectClick.offsetLeft);
positionYMyobjectClick = parseInt(myObjectClick.offsetTop);
return false;
}
}
}
 
function drag(e){
//On initialise l'évènement s'il n'a aps été créé ( sous ie )
if(!e){
e = window.event;
}
 
//Si l'objet est déplaçable et qu'il existe
if(movable && myObjectClick){
myObjectClick.style.position = "absolute" ;
//On récupère la position de la souris par rapport à l'objet
myObjectClick.style.left = e.clientX + ( positionXMyobjectClick - positionXAtClick ) + "px";
myObjectClick.style.top = e.clientY + ( positionYMyobjectClick - positionYAtClick ) + "px";
return false;
}
 
}
 
function drop(){
myObjectClick = null;
movable = false;
positionXAtClick = null;
positionYAtClick = null;
positionXMyobjectClick = null;
positionYMyobjectClick = null;
}
 
 
function getClassDrag(myObject){
with(myObject){
var x = className;
listeClass = x.split(" ");
//On parcours le tableau pour voir si l'objet est déplaçable
for(var i = 0 ; i < listeClass.length ; i++){
if(listeClass[i] == classMove){
movable = true;
myObjectClick = myObject;
}
}
 
}
}
 
 
 
window.onload = init_evenement;
</script>
 
</head>
 
<body>
<div class="boiteBleu drag"></div>
<div class="boiterouge drag"></div>
<div class="drag">et avec du contenu</div>
<div class="boiteBleu"></div>
<input type="text" class="drag" style="width:300px" />
</body>
</html>

Bon courage pour la suite :)

07/11/2007, 12h21
oceanbigone

Merci pour cette réponse. Je m'en servirai si je ne trouve pas de reponse avec scriptaculous. Mais comme j'utilise ce framework pour d'autres truc. Je préferai tout gérer avec.
07/11/2007, 12h32
le_chomeur

Avec le srcipt que je t'ai fournis , il n'y a rien a faire sur tes div, juste leur ajouter la class "drag" :)
pour ton exemple , n'ayant scriptoculous sous la main , je ne peux malheureusement t'aider ... après tout dépend de ce que tu désire faire ... si c'est du simple drage and drop , ou encore de la gestion de bloc les uns par rapports aux autres....

Bon courage et si tu as 2 minutes test mon exemple ;)
07/11/2007, 17h24
oceanbigone

J'ai testé cela fonctionne bien, mais je ne peux pas l'intégrer correctement à mon site. le système de renommage de "class" ne m'arrange pas. et une fois intégrer au site... le drag n drop ne fonctionne pas (je ne sais pas du tout pourquoi.. peut-etre a causes des autre librairies que j'utilise)

Je cherche donc toujours de l'aide sur scriptaculous et internet explorer.. un lien vers de la doc .. je suis preneur également
07/11/2007, 17h34
nox75

Peut etre ici
08/11/2007, 09h22
oceanbigone

J'avai déjà vu ce Topic, d'après moi, mon problème n'a rien a voir... Vu que moi ca ne mache pas du tout.
08/11/2007, 10h09
roro06

Bonjour

Essaie plutôt :

Code:

new Draggable($('test'))
08/11/2007, 12h42
oceanbigone

Merci pour l'info... c'est corrigé.

Par contre, le problème ne venait pas de la, la version 1.8 de scriptaculous, associé à prototype 1.6 ne semble pas fonctionné sous IE pour le dragndrop

J'utilise maintenant :
scriptaculous v 1.6.5
et prototype 1.5.0_rc1

est-ce grave docteur ? :aie:
Est-ce que ya une raison de ne pas utiliser ces version (rc1, .5 ?). Quelqu'un a-t-il rencontré des problèmes particuliers.

Si personne ne me fait un commentaire sur ces deux versions, je marquerai Résolu sur ce topic d'ici quelques jours.

MERCI A TOUS