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
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Prototype!</title>
<link rel="stylesheet" href="prototype.css" />
<style>
.widget {
border: solid black 1px;
width: 350px;
height: 110px;
text-align: center;
position: absolute;
padding: 0px 0px;
}
#bloc1 {
left: 100px;
}
#cafe {
top: 250px;
left: 500px;
}
#bloc3 {
top: 500px;
left: 200px;
}
p {
font-family: Tahoma;
}
.dragging {
background: #dcf;
}
</style>
</head>
<body>
<div id="posX">
<p></p>
</div>
<div id="posY">
<p></p>
</div>
<div class="widget" id="bloc1">
<p>Ceci est un bloc<br /> inutile, mais qui
sert à son développeur.
</p>
</div>
<div class="widget" id="cafe">
<p>Ce widget permet de faire du café<br />
Essayez donc!<br /> <br />
<button onclick="alert('Vous avez fait un café.');">
Faire un café!</button><br />
</p>
</div>
<div class="widget" id="bloc3">
<p>Il fallait un 3ème bloc, alors me voilà..<br />
*grognon*
</p>
</div>
<script src="http://ajax.googleapis.com
/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="prototype.js"></script>
<script>
$(function(){
$('.widget').mousedown(function(oMouse){
var dragged = $(this);
$(this).addClass('dragging');
wPos = { x : $(this).offset().left,
y : $(this).offset().top }; //Position du widget en absolu
$(document).mousemove(drag = function(nMouse){
$('#posX').text('X : '+nMouse.pageX);
$('#posY').text('Y : '+nMouse.pageY);
var dPos = { x : (wPos.x + nMouse.pageX - oMouse.pageX), //Nouvelle
y : (wPos.y + nMouse.pageY - oMouse.pageY) } //position du widget
if(dPos.x >= 0 &&*dPos.y >= 0 &&
(dPos.x + parseInt(dragged.css('width')) + 1) <
screen.availWidth &&
(dPos.y + parseInt(dragged.css('height')) + 113) <
screen.availHeight)
{
dragged.css('left', dPos.x);
dragged.css('top', dPos.y);
}
});
});
$('.widget').mouseup(function(){
$(document).unbind('mousemove', drag);
$(this).removeClass('dragging');
});
});
</script>
</body>
</html> |
Est-ce que le Javascript fera l'affaire?
Répondre avec citation
Pas de question technique par MP !
Envoyé par Knightdead
Partager