[SOLUCIONADO] Arrastrar divs

legomolina · #1 (**permalink**) 20/04/2014, 12:39

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

Alexis88 · #2 (**permalink**) 20/04/2014, 19:17

Antes de que sigas con esto, te propongo hacer draggables a los elementos <div> con el evento drag y su familia, implementados en HTML5.

Para lo que buscas, solamente tendrías que jugar con los eventos disponibles en el enlace que adjunté.

Saludos

legomolina · #3 (**permalink**) 21/04/2014, 08:34

Hola, gracias por eso. Al final he decidido hacerlo con otro código pero sin usar lo de drag porque no me aclaraba. Gracias de todas formas ;)