bonjour, voici le code :

index.html
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
<html>
    <head>
        <title>mon titre</title>        
        <script src='moveable.js'></script>
    </head>
    <body>
        <div style='height:200px; width:300px; background-color: blue;' id='myDiv'>
            <form>
                1 <input type='text' /><br/>
                2 <input type='text' /><br/>
                3 <input type='text' /><br/>
                <input type='submit' />
            </form>
        </div>
        <script>moveable(document.getElementById('myDiv'));</script>
    </body>
</html>
moveable.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
var GT_DRAG = false;
var GT_objInDrag = null;
 
function moveable(obj) {
    obj.style.position = 'absolute';
    obj.addEventListener('mousedown', GT_begin_drag, false);
    obj.addEventListener('mouseup', GT_end_drag, false);
}
 
function GT_begin_drag(e) {
    if(!GT_DRAG) {    
        e.stopPropagation();
        e.preventDefault();
        GT_DRAG = true;
        GT_objInDrag = e.target;
        GT_objInDrag.style.backgroundColor = 'red';
        document.addEventListener('mousemove', GT_lets_drag, false);
    }
}
 
function GT_lets_drag(e) {
    if(GT_DRAG) {
        GT_objInDrag.style.left = e.clientX-5;
        GT_objInDrag.style.top = e.clientY-5;
    }
}
 
function GT_end_drag() {
    if(GT_DRAG) {
        GT_DRAG = false;
        GT_objInDrag.style.backgroundColor = 'blue';
        GT_objInDrag = null;
    }
}
Mon probleme est au niveau de la propagation des evenements, lorsque l'on fait un cliquer-glisser sur la div, on doit pouvoir la déplacer. Cela marche nickel, sauf que lorsque l'on fait un click sur un des éléments à l'intérieur de cette div, on voit que le code de GT_begin_drag est exécuté. J'ai mis un stopPropagation mais celui-ci n'a aucun effet !!!

au secours !