Panning immagine utilizzando JavaScript in ASP.Net Pagina overflow Div

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

Domanda

Ho una pagina ASP.Net che contiene un <div> con un tag <img> all'interno. L'immagine è grande in modo che il <div> è impostata con una dimensione di 500x500 pixel con troppopieno per scorrere.

Sto tentando di aggiungere un'immagine panoramica con un clic e trascinare sull'immagine. Tuttavia, ogni volta che iniziate a trascinare l'immagine sfugge il confine dell'elemento e consuma l'intera pagina.

Ecco esempio di codice che illustra il 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>

Si noti inoltre che questo HTML funziona bene in una pagina non-ASP.Net.

C'è qualcosa nel ASP.Net Javascript che causa questo problema? Qualcuno ha un suggerimento per il panning un JPEG all'interno di un blocco <div> che funzionerà in ASP.Net? Ho provato con la libreria jQueryUI ma il risultato è lo stesso.

È stato utile?

Soluzione

il tuo div "divInnerDiv" deve essere designato come 

positition: relative;

in modo che l'IMG con 

position: absolute;

per essere posizionato dall'origine del div. in caso contrario, è assolutamente posizionato dall'origine della pagina. Penso che si può anche ottenere via con posizionamento assoluto tuo div se si desidera inserire manualmente piuttosto che nel flusso del documento.

si dispone di alcuni problemi diversi con firefox / cromo, ma è il momento di tornare a casa e questo sarà almeno mantenere la vostra immagine da saltar fuori dal suo contenitore, non appena si tocca.

modifica: problemi di firefox / chrome

nella funzione mouseMove in cui si imposta la posizione dell'elemento, Firefox e Chrome richiedono unità con il valore. dovrebbe apparire come qualcosa questo: 

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

c'è anche un problema generale di come lo script determina dove spostare l'elemento ma non sono sicuro di quello che è adesso.

EDIT2: come risolvere l'immagine jumpy

stiamo andando a modificare le procedure un po '. invece di piazzare l'immagine in base a quanto il mouse si è spostato dalla ultimo evento mossa, stiamo andando a vedere dove il mouse è paragonato a dove era quando mousedown licenziato e spostare l'immagine che lontano da dove è iniziato.

aggiungere una nuova variabile (verso l'alto) per contenere le coordinate di partenza dell'elemento img 

var imgStartLoc = null;

imposteremo questo nella funzione onMouseDown (forse non il modo più pulito per fare questo, ma funziona) 

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

anche nella funzione mousedown sostituire 

mouseOffset = getMouseOffset(this, ev);

con 

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

dal momento che vogliamo sapere dove il mouse si trova nella pagina piuttosto che nella div.

nella funzione mouseMove modificare le righe di assegnazione top / sinistra 

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';

tutto dovrebbe essere ben dopo questo.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top