Discussion :

[Death83]

Salut a tous,

j'ai recupérer un sript pour faire du drag n drop sur un element. Il marche d'ailleurs tres bien.

Cependant j'ai essayé de l'intégrer sur un éléments appelé en AJAX mais le drag n drop ne marche pas dans ce cas. J'ai integrer un alert dans le script pour voir si la fonction js était bien appelé et elle l'est bien. C'est juste le drag n drop qui ne marche plus.

Avez vous une idée de la cause de se probleme?

voici l'élément appelé en AJAX:

Code :

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

1
2
3
 
<iframe onload="load()" style="display:none;"></iframe>
<div id="dragndrop1" style="width:500px; height:300px; background-color:red;"></div>

et la fonction load:

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
 
function TElement(id) 
{ 
   this.id=id; 
   this.elt=(this.id) ? document.getElementById(id) : null; 
   function getX() 
   { 
      return this.elt.offsetLeft; 
   } 
   TElement.prototype.getX=getX; 
   function getY() 
   { 
      return this.elt.offsetTop; 
   } 
   TElement.prototype.getY=getY; 
   function setX(x) 
   { 
      return this.elt.style.left=x+"px"; 
   } 
   TElement.prototype.setX=setX; 
   function setY(y) 
   { 
      return this.elt.style.top=y+"px" 
   } 
   TElement.prototype.setY=setY; 
} 
function TEvent() 
{ 
   this.x = 0; 
   this.y = 0; 
   function init(evt) 
   { 
      this.evt=(evt) ? evt : window.event; // l'objet événement 
      if (!this.evt) return; 
      this.elt=(this.evt.target) ? this.evt.target : this.evt.srcElement; // la source de l'événement 
      this.id=(this.elt) ? this.elt.id : ""; 
      // Calcul des coordonnées de la souris par rapport au document 
      if (this.evt.pageX || this.evt.pageY) 
      { 
         this.x = this.evt.pageX; 
         this.y = this.evt.pageY; 
      } 
      else if (this.evt.clientX || this.evt.clientY) 
      { 
         this.x = this.evt.clientX + document.body.scrollLeft; 
         this.y = this.evt.clientY + document.body.scrollTop; 
      } 
   } 
   TEvent.prototype.init=init; 
   function stop() 
   { 
      this.evt.cancelBubble = true; 
      if (this.evt.stopPropagation) this.evt.stopPropagation();    
   } 
   TEvent.prototype.stop=stop;    
} 
function TDragObject(id) 
{ 
   if (!id) return; 
   this.base=TElement; 
   this.base(id); 
   this.elt.obj=this 
   this.elt.onmousedown=_startDrag; 
   function startDrag(evt) 
   { 
      this.elt.style.zIndex=1; 
      this.lastMouseX=evt.x; 
      this.lastMouseY=evt.y; 
      evt.dragObject=this; 
      document.onmousemove=_drag; 
      document.onmouseup=_stopDrag; 
      if (this.onStartDrag) this.onStartDrag(); 
   } 
   TDragObject.prototype.startDrag=startDrag;    
   function stopDrag(evt) 
   { 
      this.elt.style.zIndex=0; 
      evt.dragObject=null; 
      document.onmousemove=null; 
      document.onmouseup=null; 
      if (this.onDrop) this.onDrop(); 
   } 
   TDragObject.prototype.stopDrag=stopDrag; 
   function drag(evt) 
   {    
      dX=this.getX()+evt.x-this.lastMouseX; 
      dY=this.getY()+evt.y-this.lastMouseY; 
      this.setX(dX); 
      this.setY(dY); 
      this.lastMouseX=evt.x; 
      this.lastMouseY=evt.y; 
      if (this.onDrag) this.onDrag(); 
   } 
   TDragObject.prototype.drag=drag; 
} 
TDragObject.prototype=new TElement(); 
var _event=new TEvent(); // Objet global pour manipuler l'événement en cours 
function _startDrag(evt) 
{ 
   _event.init(evt); 
   if (this.obj && this.obj.startDrag) 
   { 
      this.obj.startDrag(_event); 
   } 
} 
function _stopDrag(evt) 
{ 
   if (_event.dragObject) _event.dragObject.stopDrag(_event); 
} 
function _drag(evt) 
{ 
   _event.init(evt); 
   if (_event.dragObject) _event.dragObject.drag(_event); 
   return false; 
} 
function afficherStatus() 
{ 
   window.status="Object ["+this.id+"] se trouve en ("+this.getX()+","+this.getY()+")"+ 
   " text =\""+this.elt.innerHTML+"\""; 
} 
function load() 
{ 
   tst=new TDragObject('dragndrop1'); 
   tst.onDrag=afficherStatus; 
}

voilou merci d'avance .

[narnou]

Code :

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

1
2
3
 
<div id="dragndrop1" style="width:500px; height:300px; background-color:red;"></div>
<iframe onload="load()" style="display:none;"></iframe>

Essaye ceci a la place

Ta fonction ne peut pas cibler un élément qui n'a pas encore été "écrit" au moment ou tu la lances, rien de plus logique

D'une manière générale, éviter les onload ailleurs que sur le body me semble un bon départ pour éviter ce genre de suprises

[Death83]

Code :

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

1
2
3
 
<div id="dragndrop1" style="width:500px; height:300px; background-color:red;"></div>
<iframe onload="load()" style="display:none;"></iframe>

Essaye ceci a la place

Ta fonction ne peut pas cibler un élément qui n'a pas encore été "écrit" au moment ou tu la lances, rien de plus logique

D'une manière générale, éviter les onload ailleurs que sur le body me semble un bon départ pour éviter ce genre de suprises

Oui j'avais mis l'onload sur le body de la page qui appelait cette page mais ca ne marchait pas non plus. (logique vu que l'élement n'existait pas).
DOnc dans ce cas je suis obliger de passer par les iframe.

[Death83]

Meme comme ca ca ne marche toujours pas.

[Death83]

Le probleme ne viendrait pas de l'utilisation de document.etc par hasard?

Je sais pas si les feuille appelé en ajax sont considéré comme faisant partie du document?

[narnou]

Mais a quoi sert donc ton iframe invisible ?
juste a déclencher du code a effectuer sur ton div ?
car dans ce cas...

Code :

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

1
2
3
4
5
6
 
<div id="dragndrop1" style="width:500px; height:300px; background-color:red;"></div>
<script language="javascript" type="text/javascript">
  tst=new TDragObject('dragndrop1'); 
  tst.onDrag=afficherStatus;
</script>

devrait très bien fonctionner...

[Death83]

Mais a quoi sert donc ton iframe invisible ?
juste a déclencher du code a effectuer sur ton div ?
car dans ce cas...

Code :

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

1
2
3
4
5
6
 
<div id="dragndrop1" style="width:500px; height:300px; background-color:red;"></div>
<script language="javascript" type="text/javascript">
  tst=new TDragObject('dragndrop1'); 
  tst.onDrag=afficherStatus;
</script>

devrait très bien fonctionner...

Ca ne marche pas non plus comme ca.

Cette methode est peut etre plus propre mais logiquement ca devrait marcher avec le iframe. Le probleme est plus du coté du principe d'Ajax je pense. Mais je vois pas comment.

[Death83]

... a éffacé (j'ai dit une sottise).