Панорамирование изображения с использованием Javascript в ASP.Net Page переполнения страницы Div - PullRequest
Новая
       32

Панорамирование изображения с использованием Javascript в ASP.Net Page переполнения страницы Div

0 голосов
/ 17 марта 2010

У меня есть страница ASP.Net, которая содержит <div> с тегом <img> внутри. Изображение большое, поэтому <div> имеет размер 500x500 пикселей, а переполнение - прокрутка.

Я пытаюсь добавить панорамирование изображения с помощью щелчка и перетаскивания изображения. Однако каждый раз, когда я начинаю перетаскивать изображение, оно выходит за границы элемента и занимает всю страницу.

Вот пример кода, который иллюстрирует проблему: 

<%@ 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>

Также обратите внимание, что этот HTML отлично работает на не-ASP.Net-странице.

Есть ли что-то в Javascript ASP.Net, что вызывает эту проблему? Кто-нибудь есть предложение для панорамирования JPEG в блоке <div>, который будет работать в ASP.Net? Я пытался использовать библиотеку jQueryUI, но результат тот же.

1 Ответ

1 голос
/ 18 марта 2010

ваш div "divInnerDiv" должен иметь стиль 

positition: relative;

для img с 

position: absolute;

для позиционирования от источника div. в противном случае, он абсолютно позиционируется с начала страницы. я думаю, что вы также можете сойти с абсолютного позиционирования вашего div, если вы хотите разместить его вручную, а не в потоке документа.

у вас есть некоторые проблемы с firefox / chrome, но пора возвращаться домой, и это по крайней мере предотвратит выпадение вашего изображения из контейнера, как только вы к нему прикоснетесь.

edit: проблемы с Firefox / Chrome

в функции mouseMove, где вы устанавливаете положение элемента, для firefox и chrome требуются единицы со значением. это должно выглядеть примерно так: 

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

Существует также общая проблема с тем, как скрипт определяет, куда перемещать элемент, но я не уверен, что это сейчас.

edit2: как исправить нервное изображение

мы собираемся немного изменить процедуры. Вместо того, чтобы размещать изображение на основе того, насколько далеко мышь отошла от последнего события перемещения, мы увидим, где мышь сравнивается с тем, где она находилась при запуске mousedown, и переместим изображение так далеко от места, где оно началось. *

добавить новую переменную (вверху) для хранения начальных координат элемента img 

var imgStartLoc = null;

мы установим это в функции onmousedown (возможно, это не самый чистый способ сделать это, но это работает) 

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

также в функции mousedown заменить 

mouseOffset = getMouseOffset(this, ev);

с 

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

так как мы хотим знать, где находится мышь на странице, а не в div.

в функции mouseMove изменить верхнюю / левую строки назначения на 

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

все должно быть хорошо после этого.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...