drag and drop fonctionnel 1 coup sur 2
voila, je suis pas du tout calé en javascript, mais je tente de voire un peu plus clair dans ce langage.
Tout comme bon début, j'ai un problème :D
je tente de faire un drag and drop sur une div, j'ai réussi a faire que lors d'un onMouseDown ma div suive mon pointeur de souris, mais quand je lâche ma div et que je retente de la redeplacer, elle ne suit plus, comme si j'avais mal réinitialiser quelque chose, ou que j'avais pas fait les appels de fonction dans le bon ordre.
assez parler, voila du code ^^ :
index.html
Code:
1
2
3
4
5
6
7
8
9
10
11
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Window</title>
<style type="text/css" media="screen">@import "window.css";</style>
<script type="text/javascript" src="window.js"></script>
</head>
<body onLoad="getAll()">
<div id="window" onMouseOver="mouseOver(this)"></div>
</body>
</html> |
window.js
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
| var mouseX = 0;
var mouseY = 0;
var mouseOffsetX = 0;
var mouseOffsetY = 0;
var dragObj = 0;
function mousePos(e)
{
mouseX = (navigator.appName == "Netscape") ? e.pageX : event.x + document.body.scrollLeft;
mouseY = (navigator.appName == "Netscape") ? e.pageY : event.y + document.body.scrollTop;
if (dragObj)
{
dragObj.style.left = mouseX - mouseOffsetX + "px";
dragObj.style.top = mouseY - mouseOffsetY + "px";
}
}
function mouseDown(e)
{
if (!e)
return ;
dragObj = this;
mouseOffsetX = mouseX - dragObj.offsetLeft;
mouseOffsetY = mouseY - dragObj.offsetTop;
}
function mouseUp(e)
{
dragObj = 0;
}
function mouseOver(e)
{
e.onmousedown = mouseDown;
}
function getAll()
{
if (navigator.appName == "Netscape")
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = mousePos;
document.onmouseup = mouseUp;
} |
et le window.css
Code:
1
2
3
4
5
6
7
8
9
| #window
{
left: 400px;
width: 400px;
height: 250px;
position: absolute;
border: solid 1px #00f;
background: #eee;
} |
si vous pouviez tester ca de votre coter (sous firefox :D) pour me dire où j'ai merdé :)
merci :)
