Hola, tengo el siguiente código:
Código Javascript
:
Ver original<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.estiloCuadro {
width: 10em;
border: solid red;
position: absolute;
top: 100px;
left: 30px;
cursor: pointer;
/*Deshabilitar selección de texto*/
-moz-user-select: none; /* Mozilla */
-khtml-user-select: none; /* Chrome */
-o-user-select: none; /* Opera */
}
</style>
<script type="text/javascript">
var xInic, yInic;
var estaPulsado = false;
function ratonPulsado(evt) {
//Obtener la posición de inicio
xInic = evt.clientX;
yInic = evt.clientY;
estaPulsado = true;
//Para Internet Explorer: Contenido no seleccionable
document.getElementById("cuadro_barra").unselectable = true;
}
function ratonMovido(evt) {
if(estaPulsado) {
//Calcular la diferencia de posición
var xActual = evt.clientX;
var yActual = evt.clientY;
var xInc = xActual-xInic;
var yInc = yActual-yInic;
xInic = xActual;
yInic = yActual;
//Establecer la nueva posición
var elemento = document.getElementById("cuadro"); //lo que se va a mover
var position = getPosicion(elemento);
elemento.style.top = (position[0] + yInc) + "px";
elemento.style.left = (position[1] + xInc) + "px";
}
}
function ratonSoltado(evt) {
estaPulsado = false;
}
/*
* Función para obtener la posición en la que se encuentra el
* elemento indicado como parámetro.
* Retorna un array con las coordenadas x e y de la posición
*/
function getPosicion(elemento) {
var posicion = new Array(2);
if(document.defaultView && document.defaultView.getComputedStyle) {
posicion[0] = parseInt(document.defaultView.getComputedStyle(elemento, null).getPropertyValue("top"))
posicion[1] = parseInt(document.defaultView.getComputedStyle(elemento, null).getPropertyValue("left"));
} else {
//Para Internet Explorer
posicion[0] = parseInt(elemento.currentStyle.top);
posicion[1] = parseInt(elemento.currentStyle.left);
}
return posicion;
}
</script>
</head>
<body>
<div id="cuadro" class="estiloCuadro"><div id="cuadro_barra">barra</div>Arrastra con el ratón<br>para mover este cuadro</div><!-- Siendo una barra tipo Windows desde donde se arrastra todo el div (no he copiado su css) -->
<script type="text/javascript">
var el = document.getElementById("cuadro_barra"); //desde donde se mueve
if (el.addEventListener){
el.addEventListener("mousedown", ratonPulsado, false);
el.addEventListener("mouseup", ratonSoltado, false);
document.addEventListener("mousemove", ratonMovido, false);
} else { //Para IE
el.attachEvent('onmousedown', ratonPulsado);
el.attachEvent('onmouseup', ratonSoltado);
document.attachEvent('onmousemove', ratonMovido);
}
</script>
</body>
</html>
Sirve para arrastrar el div cuadro. El problema es que solo vale para ese. Yo quisiera que se moviesen, por ejemplo, el div cuadro2, el cuadro3,... cuadron que son iguales que el primero pero cambian su id y la de la barra. He probado a enviar por parametros a la funcion ratonMovido el div a mover cambiando:
Código Javascript
:
Ver original<script type="text/javascript">
var el = document.getElementById("cuadro_barra"); //desde donde se mueve
var div=el.id.split("_");
if (el.addEventListener){
el.addEventListener("mousedown", ratonPulsado, false);
el.addEventListener("mouseup", ratonSoltado, false);
document.addEventListener("mousemove", function(){ratonMovido(div[0]):}, false);
} else { //Para IE
el.attachEvent('onmousedown', ratonPulsado);
el.attachEvent('onmouseup', ratonSoltado);
document.attachEvent('onmousemove', ratonMovido);
}
</script>
function ratonMovido(div,evt) {
if(estaPulsado) {
//Calcular la diferencia de posición
var xActual = evt.clientX;
var yActual = evt.clientY;
var xInc = xActual-xInic;
var yInc = yActual-yInic;
xInic = xActual;
yInic = yActual;
//Establecer la nueva posición
var elemento = document.getElementById(div); //lo que se va a mover
var position = getPosicion(elemento);
elemento.style.top = (position[0] + yInc) + "px";
elemento.style.left = (position[1] + xInc) + "px";
}
}
Pero no se porque en la funcion ratonMovido, confunde el parametro div con el evt. Creo que solucionando eso lo tendría pero no tengo ni idea de como hacerlo.
Gracias