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
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.drag {display:block;position:relative;border:0;}
img {display:block}
</style>
</head>
<script type="text/javascript" src="lightbox.js"></script>
<script type="text/javascript">
function positionne(p_id, p_posX, p_pos_Y){
document.getElementById(p_id).style.left = p_posX;
document.getElementById(p_id).style.top = p_pos_Y;
}
/*-- pour calcul deplacement entre mousedown et mouseup --*/
function sqr(a) {
return a*a;
}
function distance(x1, y1, x2, y2) {
return Math.sqrt(sqr(y2 - y1) + sqr(x2 - x1));
}
function deplacement(p_id) {
x = parseInt(p_id.style.left);
y = parseInt(p_id.style.top);
return distance(x,y,posX,posY);
}
/*------*/
var dragobject={
x:0, y:0, offsetx:null,offsety:null,targetobj:null,dragapproved:0,
initialize:function(){
document.onmousedown=this.drag;
document.onmouseup=function(){this.dragapproved=0;
/*-- si le deplacement < 3 px ouvre lightbox --*/
if (deplacement(this.targetobj)<3) showLightbox(document.getElementById('monImage'));
/*------*/}}
,drag:function(e){
var evtobj=window.event? window.event:e
this.targetobj=window.event? event.srcElement:e.target
while (this.targetobj.className!="drag" && this.targetobj.tagName!="BODY") this.targetobj=this.targetobj.parentNode
if (this.targetobj.className=="drag"){
this.dragapproved=1
if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
this.offsetx=parseInt(this.targetobj.style.left)
this.offsety=parseInt(this.targetobj.style.top)
this.x=evtobj.clientX
this.y=evtobj.clientY
if (evtobj.preventDefault) evtobj.preventDefault()
document.onmousemove=dragobject.moveit}
/*-- enregistre position au moment du mousedown --*/
posX = parseInt(this.targetobj.style.left);
posY = parseInt(this.targetobj.style.top);
/*------*/
}
,moveit:function(e){
var evtobj=window.event? window.event:e
if (this.dragapproved==1){
this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"
this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"
return false}}
}
dragobject.initialize()
</script>
<body>
<div id="idm" class="drag"><img src="98.jpg" width="70" height="99"/>
<!-- astuce : l'image est sortie de la balise <a> -->
<a href="image.jpg" rel="lightbox" id="monImage"></a>
</div>
<script type="text/javascript">
positionne('idm','290px','84px');
</script>
</body>
</html> |
lien avec drag&drop
Répondre avec citation
Envoyé par Billy KiT
Partager