Problema con el evento onmouseup
Publicado por Cristian (1 intervención) el 26/01/2015 00:13:23
Buenas, estoy teniendo problemas con una ventana modal, para imágenes muy grandes la ventana solo muestra parte de la imagen ocultando el resto, esta se puede mover tanto con arrastrar el mouse como usando scrollbars, el problema está que al usar una scrollbar si se realiza el evento onMouseUp fuera del div de las barras al querer mover la imagen o la otra barra, cliqueando y arrastrando hace como si el div fuera una imagen, aparece un duplicado más pequeño y trasparente, en chrome se me pone el cursor no-drop creo, y al soltar se mueve la imagen como si estuviera arrastrando, lo que debería suceder antes de completar el clic , se necesita un segundo clic para poder funcionar correctamente de nuevo. Algo que note es que el al realizar el evento onmouseup se tiene que mover el mouse porque si lo dejo quieto al momento de levantar el mouse sigue e cursor en move.
Este es el código y anda con cualquier imagen llamada imagen.png, abajo estan los archivos que uso
Este es el código y anda con cualquier imagen llamada imagen.png, abajo estan los archivos que uso
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
<html>
<head>
<style type="text/css">
#fondo{
position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: none;background: rgba(0,0,0,0.3);
} #divcont{
position: relative; margin: 0 auto;background-color: rgba(0,0,0,0);
} #modalcont{
position: relative;background-color: #FFF;
overflow:hidden; border: solid;border-width: 2px;
border-color: #FFF;
} #imagen{
position: relative; } #auxiliar{
position: absolute; left: 0; top:0;background-color: rgba(255,175,100,0.7);
} #arrastre{
position: absolute;background-color: rgba(0,0,255,0.5);
} #arrastre:hover{
cursor:pointer; } #rielv, #rielh{
position: absolute;box-shadow: 1px 1px 1px 0px inset;
border-radius: 6px;
border: solid;border-width: 1px;
overflow:hidden; } #rielh{
background: -moz-linear-gradient(top, #444, #888);
background: -webkit-linear-gradient(top, #444, #888);
background: -ms-linear-gradient(top, #444, #888);
background: -o-linear-gradient(top, #444, #888);
background: linear-gradient(top, #444, #888);
height: 12px; } #rielv{
background: -moz-linear-gradient(right, #888, #444);
background: -webkit-linear-gradient(top, #888, #444);
background: -ms-linear-gradient(top, #888, #444);
background: -o-linear-gradient(top, #888, #444);
background: linear-gradient(top, #888, #444);
width: 12px; } #manejadorv, #manejadorh{
position: relative; border: solid;border-width: 1px;
border-radius: 5px;
border-color: #AAA;
background-color: #DDD;
box-shadow: 1px 1px 1px 0px;
} #manejadorh{
height: 10px; } #manejadorv{
width: 10px; }</style>
<script type="text/javascript">
var manejadorRazonX=-1.3508557457212715, manejadorRazonY=-2.691895204535008;//Proporciones para mover el contenido
var arras = function(){
var divPrimarioId, ejeActual;//Variables para cerrar
return {mover : function(divMovil,xpos,ypos){
if(xpos!='x') document.getElementById(divMovil).style.left = parseInt(xpos) + 'px';
if(ypos!='y') document.getElementById(divMovil).style.top = parseInt(ypos) + 'px';
},
inicio : function(evt,divPriId,divSecId,eje){
divPrimarioId=divPriId; ejeActual=eje;var posX = evt.clientX,//Posicion del cursor
posY = evt.clientY,
divTop = document.getElementById(divSecId).style.top.replace('px',''),
divLeft = document.getElementById(divSecId).style.left.replace('px',''),//posicion y tamaño del
divMovilAncho = parseInt(document.getElementById(divSecId).style.width),//div imagen
divMovilAlto = parseInt(document.getElementById(divSecId).style.height),
divPrimarioIdAncho = parseInt(document.getElementById(divPriId).style.width),//tamaño del div arrastre
divPrimarioIdAlto = parseInt(document.getElementById(divPriId).style.height);// que es igual al div modalcont
document.getElementById(divPriId).style.cursor='move';
if (eje<0) document.getElementById('arrastre').style.display='none'; //Para descartarlo como el culpable
var diffX = posX - divLeft,
diffY = posY - divTop;
document.onmousemove = function(evt){
var posXm = evt.clientX,
posYm = evt.clientY,
aX = posXm - diffX,
aY = posYm - diffY,
margenManejadorX,margenManejadorY;
//Ejes:
//6: la imagen se arrastra en cualquier direccion
//2: la imagen se arrastra horizontalmente
//3: la imagen se arrastra verticalmente
//-2: se arrastra el manejador horizontal
//-3: se arrastra el manejador vertical
if (eje%2==0) {
if (eje>0) {
if (divPrimarioIdAncho-divMovilAncho>aX) aX=divPrimarioIdAncho-divMovilAncho;
if (0 < aX) aX = 0; //Limites en el que se puede mover la imagen
arras.mover('manejadorh',aX/manejadorRazonX,0);//mueve el manejador
} else{
if (divPrimarioIdAncho-divMovilAncho-2<aX) aX=divPrimarioIdAncho-divMovilAncho-2;
if (1 > aX) aX = 0; //Limites en el que se puede muver el manejador
arras.mover('imagen',aX*manejadorRazonX,'y');//mueve la imagen
}if (Math.abs(eje)==2) aY=0; //Movimiento horizontal unicamente
}if (eje%3==0) {
if (eje>0) {
if (divPrimarioIdAlto-divMovilAlto>aY) aY=divPrimarioIdAlto-divMovilAlto;
if (0 < aY) aY = 0;
arras.mover('manejadorv',0,aY/manejadorRazonY);
} else{
if (divPrimarioIdAlto-divMovilAlto-2<aY) aY=divPrimarioIdAlto-divMovilAlto-2;
if (1 > aY) aY = 0;
arras.mover('imagen','x',aY*manejadorRazonY);
}if (Math.abs(eje)==3) aX=0;
}arras.mover(divSecId,aX,aY); //Mueve el div que llama esta funcion
}},
alto : function(){
document.getElementById(divPrimarioId).style.cursor='pointer';
document.onmousemove = function(){}//Vacia la funcion
if (ejeActual<0) document.getElementById('arrastre').style.display='inline';
},
}}();
</script>
</head>
<body>
<!--todo esto es generado por otro JS--><div id="fondo" ondblclick="cerrar()" style="animation: 0.2s ease-out 0s normal none 1 running opacidad1; display: inline;"><!--Si funcion aun-->
<div id="divcont" onmouseup="arras.alto()" style="height: 743px; width: 1472px;"><!--Contenedor de todos los divs-->
<div id="modalcont" style="height: 652.7px; width: 1309px; top: 37px; left: 74px;"><!--Para ocultar elexedente de la imagen-->
<div id="imagen" style="height: 1757px; width: 1768px; left: 0px; top: 0px;"><!--Para mover la imagen-->
<img src="imagen.png"></img>
</div>
</div>
<div id="auxiliar" style="height: 743px; width: 1472px;"></div><!--Para cubrir la imagen y no tener problema al arrastrar sobre ella-->
<div id="arrastre" onmousedown="arras.inicio(event,id,'imagen',6)" style="height: 653px; width: 1309px; top: 39px; left: 76px; cursor: move;"></div><!--Para detectar eventos sobre la region de la imagen-->
<div id="rielh" style="width: 1311px; left: 73px; top: 694px;"><!--Barra vertical-->
<div id="manejadorh" onmousedown="arras.inicio(event,'rielh',id,-2)" style="width: 969px; left: 0px; top: 0px;"></div>
</div>
<div id="rielv" style="height: 655px; left: 1386px; top: 37px;"><!--Barra horizontal-->
<div id="manejadorv" onmousedown="arras.inicio(event,'rielv',id,-3)" style="height: 242px; left: 0px; top: 0px;"></div>
</div>
</div>
</div>
</body>
</html>
- arreglar.zip(334,7 KB)
Valora esta pregunta
0