在ASP.Net中使用Javascript平移圖像頁面溢出Div

我有一個ASP.Net頁面，其中包含<div>和<img>標記。圖像很大，所以<div>的尺寸設置爲500x500像素，並且溢出設置爲滾動。在ASP.Net中使用Javascript平移圖像頁面溢出Div

我試圖添加圖像平移使用單擊並拖動圖像。但是，每次我開始拖動圖像都會跳過元素的邊界並佔用整個頁面。

下面是示例代碼說明了這個問題：

<%@ 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在non-ASP.Net頁面正常工作。

在ASP.Net Javascript中是否存在導致此問題的內容？有沒有人有建議在一個<div>塊內平移一個可以在ASP.Net中工作的JPEG？我曾嘗試使用jQueryUI庫，但結果是相同的。

來源

2010-03-17 Bob Mc

.net是無關緊要的，因爲這是所有客戶端行爲。我會再次查看jQuery.UI可拖動 - 特別是包含選項：http://docs.jquery.com/UI/Draggable#option-containment – 2010-03-17 16:05:20

@DA - 如果.Net方面不相關，那麼爲什麼這項工作在直接的HTML頁面中，但不在ASPX頁面中？我使用jqueryUI創建了一個使用包含選項的示例頁面，該選項在IE8中工作，但在IE7中查看時遇到類似的溢出問題。我發佈了幾條消息給jQuery UI板，添加了一個錯誤報告...沒有迴應，沒有修復。 – 2010-03-17 17:23:22

我不知道。如果我不得不猜測：.net會在您的頁面中注入腳本或標記或CSS來干擾您所寫的內容。將非.net頁面的呈現頁面與.net頁面進行比較。 – 2010-03-17 18:03:45

你格「divInnerDiv」必須被作爲樣式

positition: relative;

爲IMG與

position: absolute;

從div的起源定位。否則，它從頁面的原點絕對定位。我認爲如果你想手動放置而不是放在文檔流中，你也可以絕對放置你的div。

你對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) 
};

也是在鼠標按下功能替換

mouseOffset = getMouseOffset(this, ev);

與

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

因爲我們想知道鼠標在頁面上而不是在div中。

在鼠標移動功能變化

頂部/左分配線

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

都應該經過這很好。

來源

2010-03-17 22:08:54 lincolnk

太棒了！我仍然很難與CSS定位。這是使用我在互聯網上發現的一些javascript而沒有真正查看它的完美例子。如果您有機會就Firefox/Chrome問題發表評論，我會很樂意將此標記爲接受的答案。謝謝。 – 2010-03-18 00:10:11

琳琅滿意的工作。這是當之無愧的10分。 – 2010-03-18 15:25:15

在ASP.Net中使用Javascript平移圖像頁面溢出Div

回答

相關問題