Lavando la imagen El uso de Javascript en ASP.Net Página desbordamientos Div

StackOverflow https://stackoverflow.com/questions/2463739

Pregunta

Tengo una página ASP.Net que contiene una <div> con una etiqueta <img> dentro. La imagen es grande por lo que la <div> se establece con un tamaño de 500x500 píxeles con desbordamiento configurar para desplazarse.

Estoy intentando agregar una imagen panorámica usando un clic y arrastre sobre la imagen. Sin embargo, cada vez que comienza a arrastrar la imagen se escapa de los límites del elemento y consume toda la página.

Aquí es código de ejemplo que ilustra el problema: 

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="divInnerDiv" style="overflow:scroll; width:500px; height:500px; cursor:move;">
            <img id="imgTheImage" src="Page0001.jpg" border="0" />
        </div>

        <script type="text/javascript">
            document.onmousemove = mouseMove;
            document.onmouseup   = mouseUp;

            var dragObject  = null;
            var mouseOffset = null;

            function mouseCoords(ev){
                if(ev.pageX || ev.pageY){
                    return {x:ev.pageX, y:ev.pageY};
                }
                return {
                    x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
                    y:ev.clientY + document.body.scrollTop  - document.body.clientTop
                };
            }

            function getMouseOffset(target, ev){
                ev = ev || window.event;

                var docPos    = getPosition(target);
                var mousePos  = mouseCoords(ev);
                return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
            }

            function getPosition(e){
                var left = 0;
                var top  = 0;

                while (e.offsetParent){
                    left += e.offsetLeft;
                    top  += e.offsetTop;
                    e     = e.offsetParent;
                }

                left += e.offsetLeft;
                top  += e.offsetTop;

                return {x:left, y:top};
            }

            function mouseMove(ev) {
                ev           = ev || window.event;
                var mousePos = mouseCoords(ev);

                if(dragObject){
                    dragObject.style.position = 'absolute';
                    dragObject.style.top      = mousePos.y - mouseOffset.y;
                    dragObject.style.left     = mousePos.x - mouseOffset.x;

                    return false;
                }
            }
            function mouseUp(){
                dragObject = null;
            }

            function makeDraggable(item){
                if(!item) return;
                item.onmousedown = function(ev){
                    dragObject  = this;
                    mouseOffset = getMouseOffset(this, ev);
                    return false;
                }
            }

            makeDraggable(document.getElementById("imgTheImage"));
        </script>

    </div>
    </form>
</body>
</html>

Tenga en cuenta también que este código HTML funciona bien en una página non-ASP.Net.

¿Hay algo en el Javascript ASP.Net que está causando este problema? ¿Alguien tiene una sugerencia para la expansión de un JPEG dentro de un bloque <div> que trabajará en ASP.Net? He intentado usar la biblioteca jQueryUI pero el resultado es el mismo.

¿Fue útil?

Solución

div su "divInnerDiv" debe ser de estilo como 

positition: relative;

para que el img con 

position: absolute;

para ser posicionado desde el origen de la div. de lo contrario, se posiciona de manera absoluta desde el origen de la página. Creo que también se puede conseguir lejos con el posicionamiento absolutamente su div si desea colocarlo manualmente en lugar de en el flujo del documento.

usted tiene algunos problemas diferentes con Firefox / Chrome, pero es el momento de volver a casa y esto, al menos, mantener su imagen se salga de su recipiente tan pronto como se toca.

editar: cuestiones Firefox / Chrome

en el mouseMove función en la que se está ajustando la posición del elemento, Firefox y Chrome requieren unidades con el valor. que debe ser similar algo así: 

dragObject.style.top = (mousePos.y - mouseOffset.y).toString() + 'px';
dragObject.style.left = (mousePos.x - mouseOffset.x).toString() + 'px';

también hay un problema general con la forma determina la secuencia de comandos que desea mover el elemento a, pero no estoy seguro de lo que es ahora.

Edit2: cómo fijar la imagen nervioso

vamos a cambiar los procedimientos un poco. en lugar de colocar la imagen en función de lo lejos el ratón se ha movido desde el último evento de movimiento, vamos a ver donde el ratón se compara a donde estaba cuando mousedown dispararon y mover la imagen lejos de donde empezó.

añadir una nueva variable (en la parte superior) para mantener las coordenadas de inicio del elemento img 

var imgStartLoc = null;

vamos a establecer esto en la función onMouseDown (quizás no sea la forma más limpia de hacer esto pero funciona) 

imgStartLoc = {
    x: isNaN(parseInt(dragObject.style.left)) ? 0 : parseInt(dragObject.style.left),
    y: isNaN(parseInt(dragObject.style.top)) ? 0 : parseInt(dragObject.style.top)
};

También en la función mousedown reemplace 

mouseOffset = getMouseOffset(this, ev);

con 

ev = ev || window.event;
mouseOffset = mouseCoords(ev);

ya que queremos saber dónde está el ratón sobre la página en lugar de en el div.

en la función mouseMove cambiar las líneas de asignación superior / izquierda a 

var mouseDelta = { x: mousePos.x - mouseOffset.x, y: mousePos.y - mouseOffset.y }
dragObject.style.top = (imgStartLoc.y + mouseDelta.y).toString() + 'px';
dragObject.style.left = (imgStartLoc.x + mouseDelta.x).toString() + 'px';

todos deben estar bien después de esto.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top