[Drag] Double évènement

Bonjour a tous !

Lors d'un drag sur un div, je n'arrive pas a avoir les evenements du style onMouseOver, onMouseUp, etc sur les autres éléments du document. Cela me parrait assez logique puisque le pointer de la souris est sur le div et le div est intercalé entre la souris et l'élément. Comment faire a votre avis pour contrer cela ?

Mon code:

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
45
46
47
48
49
50
51
 
var dragEnCours = false;
        var div;
        var decalageX = 0;
        var decalageY = 0;
        document.onmouseup = EndDrag;
        document.onselectstart = function() { return false };
 
        function StartDrag(element) //Début du drag
        {
            if( !dragEnCours )
            {
                dragEnCours = true;
                div = document.getElementById(element);
                div.style.filter = "alpha(opacity=20)";
                decalageX = window.event.x - div.offsetLeft;
                decalageY = window.event.y - div.offsetTop;
                document.onmousemove = Drag;
            }            
        }
 
        function EndDrag() //Fin du drag
        {
            if( dragEnCours )
            {
                div.style.filter = "alpha(opacity=100)";
                document.onmousemove = null;
                dragEnCours = false;
            }
        }
 
        function Drag() //Pendant le drag
        {
            if( dragEnCours )
            {
                div.style.left = window.event.x + document.body.scrollLeft - decalageX;
                div.style.top = window.event.y + document.body.scrollTop - decalageY;
            }
        }
 
        function OnTabOver(element) // onMouseOver sur un tableau
        {
            if( dragEnCours )
                document.getElementById(element).style.borderColor = "blue";                
        }
 
        function OnTabOut(element) // onMouseOut sur un tableau
        {
            if( dragEnCours )
                document.getElementById(element).style.borderColor = "black";                
        }

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<table align="center" height="500" width="800">
            <tr>
                <td width="200" align="center">
                    <div style="CURSOR: move; position: absolute; background-color: Aqua" id="div1" onMouseDown="StartDrag('div1');" onMouseUp="EndDrag('div1');">&nbsp;&nbsp;XXX&nbsp;&nbsp;</div>
                </td>
                <td width="200"><table bordercolor="black" id="t1" border="1" width="100%" onmouseover="return OnTabOver('t1');" onmouseout="return OnTabOut('t1');" style="border-collapse:collapse"><tr><td>&nbsp;</td></tr></table></td>
                <td>&nbsp;</td>
                 <td width="200"><table bordercolor="black" id="t2" border="1" width="100%" onmouseover="return OnTabOver('t2');" onmouseout="return OnTabOut('t2');" style="border-collapse:collapse"><tr><td>&nbsp;</td></tr></table></td>
                <td width="200" align="center">
                    <div style="CURSOR: move; position: absolute; background-color: Aqua" id="div2" onMouseDown="StartDrag('div2');" onMouseUp="EndDrag('div2');">&nbsp;&nbsp;YYY&nbsp;&nbsp;</div>
                </td>
            </tr>        
        </table>

Une solution simple serait de positionner le div pendant le drag a Souris+1 en X et Souris+1 en Y, mais c'est moins beau ! :)

Merci d'avance pour votre aide :wink:

Tester entre le positionnement actuel du div que tu drag et du div sur lequel tu passes...

Si t'as souris est au centre du div que tu drag, il faut que les 2 divs se superposent de plus de 50% pour que ta souris soit sur le div de derriere.

Et ouep, c'est assez lourd a coder mais bon voila :/

Le problème c'est quand tu passes au-dessus de plusieurs éléments qui doivent réagirent.
Comment savoir au-dessus duquel tu es ?