Dejar de mover div?

Publicado en 'Programación' por dsk, 18 Abr 2013.





  1. dsk

    dsk Miembro frecuente

    Registro:
    24 May 2011
    Mensajes:
    195
    Likes:
    6




    Estoy trantando de lograr que en una pagina web se pueda mover algunos divs, y lo consegui con el siguiente código:

    Ejemplo:
    HTML:
    <html>
        <head>
            <title>Coordenadas del mouse</title>
            <style type="text/css">
                #mover {
                    background-color: blue;
                    cursor: move;
                    height: 200px;
                    width: 200px;
                    position: absolute;
                    top: 100px;
                    left: 100px;
                }
            </style>
            <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
            <script type="text/javascript" >
                $(document).ready(function(){
                    var pointX = 0;
                    var pointY = 0;
                    $(document).mousemove(function(e){
                        // e.pageX - posición X
                        // e.pageY - posición Y
                        pointX = e.pageX;
                        pointY = e.pageY;
                        $('#coordenadas').html('X = ' + e.pageX + ' | Y = ' + e.pageY);
                    });
                    $('#mover').on('mousedown', function() {
                        var oldX = pointX;
                        var oldY = pointY;
                        var divX = $('#mover').position().left;
                        var divY = $('#mover').position().top;
                        $(document).mousemove(function(e){
                            $('#mover').css('left', function() {
                                return (divX + e.pageX - oldX);
                            });
                            $('#mover').css('top', function() {
                                return (divY + e.pageY - oldY);
                            });
                        });
                    });
                });    
            </script>    
        </head>
        <body>
            <div id="coordenadas">Cargando coordenadas...</div>
            <div id="mover"></div>
        </body>
    </html>
    La idea es que el usuario pueda mover el div mientras no suelte el clic derecho, el problema es que al soltarlo se sigue moviendo.
     


  2. tenguman

    tenguman Miembro de plata

    Registro:
    15 Nov 2010
    Mensajes:
    3,142
    Likes:
    1,016
    te falta implementar la accion para el evento mouseup, que es el que se ejecuta cuando sueltas algun boton del mouse, es la contraparte del mousedown

    http://api.jquery.com/mouseup/
     
  3. dsk

    dsk Miembro frecuente

    Registro:
    24 May 2011
    Mensajes:
    195
    Likes:
    6
    Pues lo implemente de la siguiente forma y aun hay momentos en los que se mueve al soltar el clic derecho

    HTML:
    <html>
        <head>
            <title>Coordenadas del mouse</title>
            <style type="text/css">
                #mover {
                    background-color: blue;
                    cursor: move;
                    height: 200px;
                    width: 200px;
                    position: absolute;
                    top: 100px;
                    left: 100px;
                }
            </style>
            <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
            <script type="text/javascript" >
                $(document).ready(function(){
                    var pointX = 0;
                    var pointY = 0;
                    var mover = false;
                    $(document).mousemove(function(e){
                        // e.pageX - posición X
                        // e.pageY - posición Y
                        pointX = e.pageX;
                        pointY = e.pageY;
                        $('#coordenadas').html('X = ' + e.pageX + ' | Y = ' + e.pageY);
                    });
                    $('#mover').on('mousedown', function() {
                        mover = true;
                        var oldX = pointX;
                        var oldY = pointY;
                        var divX = $('#mover').position().left;
                        var divY = $('#mover').position().top;
                        $(document).mousemove(function(e){
                            if(mover == true) {
                                $('#mover').css('left', function() {
                                    return (divX + e.pageX - oldX);
                                });
                                $('#mover').css('top', function() {
                                    return (divY + e.pageY - oldY);
                                });
                            }
                        });
                    }).mouseup(function() { mover = false; });
                });    
            </script>    
        </head>
        <body>
            <div id="coordenadas">Cargando coordenadas...</div>
            <div id="mover"></div>
        </body>
    </html>
     
    Última edición: 19 Abr 2013
  4. tenguman

    tenguman Miembro de plata

    Registro:
    15 Nov 2010
    Mensajes:
    3,142
    Likes:
    1,016
    El menu contextual del click derecho te esta trayendo problemas, puedes:

    - desactivalo por javascript

    - o no permitas hacer el drag and drop con el click derecho