Scriptaculous, drag'n'Drop simple et internet explorer [Résolu]

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

oceanbigone · 08/11/2007, 09h22

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.

roro06 · 08/11/2007, 10h09

Bonjour

Essaie plutôt :

Code :

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

new Draggable($('test'))

oceanbigone · 08/11/2007, 12h42

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 ?

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

08/11/2007, 10h09	#8
roro06 Modérateur Inscription : avril 2007 Messages : 1 364 Détails du profil Informations personnelles : Âge : 42 Informations forums : Inscription : avril 2007 Messages : 1 364 Points : 1 551 Points : 1 551	Bonjour Essaie plutôt : Code : Sélectionner tout - Visualiser dans une fenêtre à part new Draggable($('test')) __________________ " La vie c'est quelque chose de très fort et de très beau.... La vie appartient a tous les vivants. It's both a dream and a feeling. C'est être ce que nous ne sommes pas sans le rester. La vie c'est mourir aussi....Et mourir c'est vraiment strong...c'est rester en vie au delà de la mort...Tous ceux qui sont morts n'ignorent pas de le savoir." (J.C. VanDamme, humoriste et philosophe belge . A moins que ce ne soit l'inverse ...) Chuck Norris comprend JC Van Damme.
	00

07/11/2007, 12h21	#3
oceanbigone Membre du Club Inscription : septembre 2005 Messages : 95 Détails du profil Informations forums : Inscription : septembre 2005 Messages : 95 Points : 42 Points : 42	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.
	00

07/11/2007, 12h32	#4
le_chomeur Expert Confirmé Sénior Développeur informatique Inscription : février 2006 Messages : 3 563 Détails du profil Informations personnelles : Localisation : France Informations professionnelles : Activité : Développeur informatique Informations forums : Inscription : février 2006 Messages : 3 563 Points : 4 025 Points : 4 025	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
	00

07/11/2007, 17h24	#5
oceanbigone Membre du Club Inscription : septembre 2005 Messages : 95 Détails du profil Informations forums : Inscription : septembre 2005 Messages : 95 Points : 42 Points : 42	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
	00

07/11/2007, 17h34	#6
nox75 Membre actif Inscription : octobre 2006 Messages : 353 Détails du profil Informations forums : Inscription : octobre 2006 Messages : 353 Points : 158 Points : 158	Peut etre ici
	00

08/11/2007, 09h22	#7
oceanbigone Membre du Club Inscription : septembre 2005 Messages : 95 Détails du profil Informations forums : Inscription : septembre 2005 Messages : 95 Points : 42 Points : 42	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.
	00

08/11/2007, 12h42	#9
oceanbigone Membre du Club Inscription : septembre 2005 Messages : 95 Détails du profil Informations forums : Inscription : septembre 2005 Messages : 95 Points : 42 Points : 42	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 ? 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
	00

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