[AJAX] Drag n drop d'un element appelé par AJAX
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:
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:
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 ;).
