Déplacement de div

**vodkline** · 21/04/2014, 13h15

Bonjour,
depuis plusieur jour j'ai un soucis

je voudrai pouvoir pouvoir deplacer deux div (j'ai donc utiliser le javascript)
j'arrive a deplacer mes divs sans aucun soucis sur mon jsfiddle

http://jsfiddle.net/raKqs/

j'ai donc fais une page html :

voila ma page html

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
	<meta charset="utf-8" />
	<title> essaie mouvenemnt canvas </title>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
	<script type="text/javascript" src="move.js"></script>
</head>
<body>
<div id="back"></div>
<div class="draggable" style="background-color: green;"></div>
<div class="draggable" style="top: 125px;"></div>
</body>
</html>

voila ma page 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
var maxHeight = window.innerHeight;
var midDragWidth = 20; //half width of draggable
var midDragHeight = 40; //half height of draggable
 
var draggables = document.getElementsByClassName("draggable");
var drags = Array.prototype.slice.call(draggables);
console.log(drags);
for (var key in drags) {
    var drag = draggables[key];
    drag.onmousedown = function () {
        var tmpDrag = this;
        document.onmousemove = function (e) {
            x = e.clientX;
            y = e.clientY;
            if (maxHeight - midDragHeight < y) {
                y = maxHeight - midDragHeight;
            } else if (0 > y - midDragHeight) {
                y = midDragHeight;
            }
            if (maxWidth - midDragWidth < x) {
                x = maxWidth - midDragWidth;
            } else if (0 > x - midDragWidth) {
                x = midDragWidth;
            }
            tmpDrag.style.top = (y - midDragHeight) + "px";
            tmpDrag.style.left = (x - midDragWidth) + "px";
        };
    };
 
    drag.onmouseup = function () {
        document.onmousemove = null;
    }
}

cette page est inclue dans le head (move.js)

et la impossible de bouger les div

pouvez vous m'aider ?

**Bovino** · 21/04/2014, 15h00

Au moment où tu inclues ton script, le DOM n'existe pas, donc document.getElementsByClassName("draggable"); ne contient aucun élément.

**vodkline** · 21/04/2014, 15h23

comment dois-je faire donc ?

j'ai deplacer comme ceci :

index.html

Code html :

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
45
46
47
48
49
<html>
<head>
	<meta charset="utf-8" />
	<title> essaie mouvenemnt canvas </title>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
 
 
<div id="back"></div>
<div class="draggable" style="background-color: green;"></div>
<div class="draggable" style="top: 125px;"></div>
<script>
var maxHeight = window.innerHeight;
var midDragWidth = 20; //half width of draggable
var midDragHeight = 40; //half height of draggable
 
var draggables = document.getElementsByClassName("draggable");
var drags = Array.prototype.slice.call(draggables);
console.log(drags);
for (var key in drags) {
    var drag = draggables[key];
    drag.onmousedown = function () {
        var tmpDrag = this;
        document.onmousemove = function (e) {
            x = e.clientX;
            y = e.clientY;
            if (maxHeight - midDragHeight < y) {
                y = maxHeight - midDragHeight;
            } else if (0 > y - midDragHeight) {
                y = midDragHeight;
            }
            if (maxWidth - midDragWidth < x) {
                x = maxWidth - midDragWidth;
            } else if (0 > x - midDragWidth) {
                x = midDragWidth;
            }
            tmpDrag.style.top = (y - midDragHeight) + "px";
            tmpDrag.style.left = (x - midDragWidth) + "px";
        };
    };
 
    drag.onmouseup = function () {
        document.onmousemove = null;
    }
}
</script>
</body>
</html>

cela ne change rien

**NoSmoking** · 21/04/2014, 22h28

Bonjour,
je commencerais par mettre un DOCTYPE, cela peut aider, mais surtout il semblerait que tu ais oublié de renseigner la variable maxWidth.

Déplacement de div

JavaScript

Discussions similaires

Partager

Partager