Panning Image Utilisation de Javascript dans ASP.Net Page Overflows Div

J'ai une page ASP.Net contenant un <div> avec une <img> . L'image est grande, de sorte que le <div> est défini avec une taille de 500×500 pixels avec un débordement pour défiler.

J'essaie d'ajouter un panoramique d'image en utilisant un clic et de glisser sur l'image. Cependant, chaque fois que je commence à traîner, l'image échappe à la limite de l'élément et consomme toute la page.

Voici un exemple de code qui illustre le problème:

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

Notez également que ce HTML fonctionne bien dans une page non-ASP.Net.

Y at-il quelque chose dans le Javascript ASP.Net qui cause ce problème? Est-ce que quelqu'un a une suggestion pour panoramique un JPEG dans un bloc <div> qui fonctionnera dans ASP.Net? J'ai essayé d'utiliser la bibliothèque jQueryUI, mais le résultat est le même.

Votre div "divInnerDiv" doit être qualifié de

 positition: relative;

Afin que l'img avec

 position: absolute;

Pour être positionné à partir de l'origine de la div. Sinon, il est absolument positionné à partir de l'origine de la page. Je pense que vous pouvez également vous séparer du positionnement absolu de votre div si vous souhaitez le placer manuellement plutôt que dans le flux du document.

Vous avez des problèmes différents avec Firefox / Chrome, mais il est temps de rentrer à la maison, et cela empêchera au moins votre image de sortir de son conteneur dès que vous l'aurez touché.

Modifier: problèmes de Firefox / Chrome

Dans la fonction mouseMove où vous définissez la position de l'élément, firefox et chrome nécessitent des unités avec la valeur. Il devrait ressembler à quelque chose comme ceci:

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

Il y a aussi un problème général avec la façon dont le script détermine où déplacer l'élément, mais je ne suis pas sûr de ce qu'il est maintenant.

Edit2: comment réparer l'image nerveuse

Nous allons changer un peu les procédures. Plutôt que de placer l'image en fonction de la distance à laquelle la souris est passée du dernier événement de déplacement, nous allons voir où la souris est comparée à l'endroit où elle était lorsque mousedown a tiré et déplacer l'image loin d'où elle a commencé.

Ajoute une nouvelle variable (vers le haut) pour maintenir les coordonnées de départ de l'élément img

 var imgStartLoc = null;

Nous allons définir cela dans la fonction onmousedown (peut-être pas le moyen le plus propre de le faire, mais cela fonctionne)

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

Également dans la fonction mousedown remplacer

 mouseOffset = getMouseOffset(this, ev);

avec

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

Car nous voulons savoir où se trouve la souris sur la page plutôt que dans la division.

Dans la fonction mouseMove, modifiez les lignes d'affectation supérieure / gauche vers

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

Tout devrait être bien après.