drag and drop fonctionnel 1 coup sur 2

**yvesall** · 19/10/2008, 18h31

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

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 :

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

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 :

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
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 :

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

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

) pour me dire où j'ai merdé

merci

**yvesall** · 21/10/2008, 11h00

j'ai voulu tester ce code sur IE, mais ca ne marche pas du tout
ce qui montre bien que mon code est pourri
mais ca m'aide pas a savoir comment m'y prendre

drag and drop fonctionnel 1 coup sur 2

JavaScript

Discussions similaires

Partager

Partager