Drag'n'Drop simple et Internet Explorer

**oceanbigone** · 06/11/2007, 23h41

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 :

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

**le_chomeur** · 07/11/2007, 10h16

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 :

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

**oceanbigone** · 07/11/2007, 12h21

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.

**le_chomeur** · 07/11/2007, 12h32

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

**oceanbigone** · 07/11/2007, 17h24

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

**nox75** · 07/11/2007, 17h34

Peut etre ici

Drag'n'Drop simple et Internet Explorer [script.aculo.us]

Bibliothèques & Frameworks

Vue hybride

Discussions similaires

Partager

Partager