Déplacement d'une div

**pc75** · 19/05/2014, 16h01

Bonjour,

Voilà un extrait d'un code récupéré sur le net et qui me pose problème :

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<HTML>
<HEAD>
<script type="text/javascript">
 
var X_OTHER = 1;
var X_LEFT = 2;
var X_RIGHT = 3;
 
var Y_OTHER = 1;
var Y_UP = 2;
var Y_DOWN = 3;
 
var vgCurrentElement = null;
var vgCurrentPositionX = X_OTHER;
var vgCurrentPositionY = Y_OTHER;
 
var vgCurrentX = 0;
var vgCurrentY = 0;
var vgCurrentWidth = 0;
var vgCurrentHeight = 0;
 
var vgMouseX = 0;
var vgMouseY = 0;
var vgMouseDiffX = 0;
var vgMouseDiffY = 0;
var vgMouseDown = false;
 
var vgTimerMouse;
var vgTimerTime = 20;
 
 
//----------------------------//
function position(e)
	{
    vgMouseX = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
    vgMouseY = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
	}
 
//----------------------------//
function fnResizeDiv()
	{
    if(vgCurrentElement!=null && vgCurrentElement!=undefined)
	    {
	    document.getElementById(vgCurrentElement).style.left = vgCurrentX;
	    document.getElementById(vgCurrentElement).style.top = vgCurrentY;
	    document.getElementById(vgCurrentElement).style.width = vgCurrentWidth;
	    document.getElementById(vgCurrentElement).style.height = vgCurrentHeight;
	    }
	}
 
//----------------------------//
function fnOnMouseDown()
	{
    vgMouseDown = true;
 
    if(vgCurrentElement!=null && vgCurrentElement!=undefined)
	    {
        //Init of size
        vgCurrentX = document.getElementById(vgCurrentElement).offsetLeft;
        vgCurrentY = document.getElementById(vgCurrentElement).offsetTop;
        vgCurrentWidth = document.getElementById(vgCurrentElement).offsetWidth;
        vgCurrentHeight = document.getElementById(vgCurrentElement).offsetHeight;
 
        //Init of distance
        vgMouseDiffX = vgMouseX-vgCurrentX;
        vgMouseDiffY = vgMouseY-vgCurrentY;
 
        //Init of position
        if(vgMouseDiffX < 20 || (vgCurrentWidth-vgMouseDiffX) < 20)
	        {
            if(vgMouseDiffX < vgCurrentWidth/2)
                vgCurrentPositionX = X_LEFT;
            else
                vgCurrentPositionX = X_RIGHT;
		    }
        else
            vgCurrentPositionX = X_OTHER;
 
        if(vgMouseDiffY < 20 || (vgCurrentHeight-vgMouseDiffY) < 20)
			{
            if(vgMouseDiffY > vgCurrentHeight/2)
                vgCurrentPositionY = Y_DOWN;
            else
                vgCurrentPositionY = Y_UP;
	        }
        else
            vgCurrentPositionY = Y_OTHER;
			vgTimerMouse = setInterval("fnOnMouseMove();", vgTimerTime);
			}
	}
 
function fnOnMouseUp()
	{
    vgMouseDown = false;
    clearInterval(vgTimerMouse);
	}
 
function fnOnMouseMove()
	{
    if(vgMouseDown && vgCurrentElement!=null && vgCurrentElement!=undefined)
	    {
        switch(vgCurrentPositionX)
		    {
            case X_LEFT:
                vgCurrentWidth += vgCurrentX-vgMouseX;
                if(vgCurrentWidth<0)
                    vgCurrentWidth = 0;
                else
                    vgCurrentX = vgMouseX;
                break;
            case X_RIGHT:
                vgCurrentWidth = vgMouseX-vgCurrentX;
				if(vgCurrentWidth<0)
				    vgCurrentWidth = 0;
				break;
            default: break;
			}
        switch(vgCurrentPositionY)
			{
            case Y_UP:
                vgCurrentHeight += vgCurrentY-vgMouseY;
                if(vgCurrentHeight<0)
                    vgCurrentHeight = 0;
                else
                    vgCurrentY = vgMouseY;
                break;
            case Y_DOWN:
                vgCurrentHeight = vgMouseY-vgCurrentY;
                if(vgCurrentHeight<0)
                    vgCurrentHeight = 0;
                break;
            default: break;
			}
 
        if(vgCurrentPositionX==X_OTHER && vgCurrentPositionY==Y_OTHER)
			{
            vgCurrentX = vgMouseX-vgMouseDiffX;
            vgCurrentY = vgMouseY-vgMouseDiffY;
			}
        fnResizeDiv();
		}
	}
 
function fnOnMouseOver(sSelectedElementName)
	{
    if(!vgMouseDown)
		{
        if(sSelectedElementName==null && sSelectedElementName!="undefined")
			{
			vgCurrentElement = null;
			}
        else
			{
			vgCurrentElement = sSelectedElementName;
			}
		}
	}
 
//----------------------------//
function fnOnLoad()
	{
    if(navigator.appName.substring(0,3) == "Net")
        document.captureEvents(Event.MOUSEMOVE);
		document.onmousemove = position;
		//fnResizeDiv();
	}
</script>
</HEAD>
<body onLoad="fnOnLoad();" onMouseDown="fnOnMouseDown();" onMouseUp="fnOnMouseUp();">
 
<div id="MonDiv" name="MonDiv" onMouseOver="fnOnMouseOver('MonDiv');" onMouseOut="fnOnMouseOver();" style="cursor:move; display:block; border-width:2px; border-style:solid; top:250px; left:500px; position:absolute; background-color:lightgrey;">
	<table align="center" border="2">
		<tr>
			<td bgColor="#8db4e2">
				<font face="arial" size="2" color="white">
				<strong>
				<input type="text" size="20">
				</strong>
				</font>
			</td>
		</tr>
	</table>
	<p align="center">
		<input type="button" name="btnValider" value="Valider">
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<input type="button" name="btnAnnuler" value="Annuler">
	</p>
	<br>
</div>
</BODY>
</HTML>

Le souci est que si je saisis du texte dans mon input, je ne peux pas le sélectionner en faisant glisser la souris.
La fenêtre se déplace.

Comment faudrait-il faire pour dire que, si la souris est sur un input, ne pas déplacer la fenêtre ?

Merci.

**pc75** · 20/05/2014, 15h21

Finalement, j'ai pris l'option jquery.

**NoSmoking** · 21/05/2014, 08h02

Bonjour,
visiblement dans ta fonction function fnOnMouseDown(), il te suffisait de tester que l'objet source n'était pas un INPUT.

Code :

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

1
2
3
4
5
6
function fnOnMouseDown(e){
  e = e || window.event;
  var oSrce = e.target || e.srcElement;
  if( oScre.tagName == 'INPUT') return;
  // la suite du code
}

**pc75** · 21/05/2014, 17h07

Bonjour,

Merci, mais je ne suis pas assez à l'aise avec javascript.

Déplacement d'une div

JavaScript

Discussions similaires

Partager

Partager