對ASP圖像進行JavaScript平移

這裏遇到了一些問題。我試圖實現一些JavaScript，它應該爲ASP Image組件添加一些客戶端功能。實際上這個圖像組件是DevExpress組件之一，名爲「AspxBinaryImage」。它只是一個修改過的ASP圖片，帶有更多的CSS和東西，但基礎仍然只是HTML和許多JavaScript代碼。對ASP圖像進行JavaScript平移

好吧，現在我的問題：我試圖對此圖像執行平移。如果我沒有使用任何類型的ASP組件，只需將該網站命名爲簡單的HTML頁面，那麼IE就沒有問題，但Mozilla完全不工作。如果我嘗試在ASP頁面上下文中使用此JavaScript，則什麼都不起作用。

我發現這個：Panning Image Using Javascript in ASP.Net Page Overflows Div並將它的很多部分改編爲我的函數。我也嘗試了其中一個回覆中的「自定義」，但它不起作用。實際上，Firefox的JavaScript控制檯以及FireBug控制檯在源代碼中似乎沒有發現任何錯誤，衝突或問題。

這是我的ASP頁面，其不以任何瀏覽器中運行的完整代碼：

<!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> 
    <script language="JavaScript" type="text/javascript" src="/JavaScript/MouseWheelZooming.js"> 
    </script> 

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

     function main() { 
      alert("foo"); 
      initWheelZoomEventhandler(); 
      makeDraggable(document.getElementById("Mapimage")); 
     } 


    </script> 

</head> 
<body onload="javascript:main();"> 
    <form id="form1" runat="server"> 
    <div id="Container"> 
     <table border="0"> 
      <tr> 
       <td> 
        <dx:ASPxButton ID="ASPxButton1" runat="server" AutoPostBack="False" Text="Refresh"> 
         <ClientSideEvents Click="function (r,s){Callback.PerformCallback();}" /> 
        </dx:ASPxButton> 
       </td> 
       <td> 
        <dx:ASPxButton ID="ASPxButton2" runat="server" AutoPostBack="False" Text="Pan"> 
         <ClientSideEvents Click="function (r, s){Callback.PerformCallback();}" /> 
        </dx:ASPxButton> 
       </td> 
       <td> 
        <dx:ASPxButton ID="ASPxButton3" runat="server" AutoPostBack="False" Text="Zoom In"> 
         <ClientSideEvents Click="function (r, s){Callback.PerformCallback();}" /> 
        </dx:ASPxButton> 
       </td> 
       <td> 
        <dx:ASPxButton ID="ASPxButton4" runat="server" AutoPostBack="False" Text="Zoom Out" 
         HorizontalAlign="Center"> 
         <ClientSideEvents Click="function (r, s){Callback.PerformCallback();}" /> 
        </dx:ASPxButton> 
       </td> 
       <td> 
        <dx:ASPxButton ID="ASPxButton5" runat="server" AutoPostBack="False" Text="Zoom Rec" 
         HorizontalAlign="Center"> 
         <ClientSideEvents Click="function (r, s){Callback.PerformCallback();}" /> 
        </dx:ASPxButton> 
       </td> 
      </tr> 
     </table> 
    </div> 


     <dx:ASPxCallbackPanel ID="Callback" runat="server" ClientInstanceName="Callback" 
      OnCallback="Callback_Callback" HideContentOnCallback="False" ShowLoadingPanel="False" 
      style="overflow:scroll; width: 300px; height: 400px; cursor: move; position: relative;"> 
      <PanelCollection> 
       <dx:PanelContent runat="server"> 
        <%--<div id="divInnerDiv" >--%> 
         <dx:ASPxBinaryImage ID="Mapimage" runat="server" ClientInstanceName="Mapimage"> 
         </dx:ASPxBinaryImage> <%--style="position : absolute;" --%> 
        <%--</div>--%> 
       </dx:PanelContent> 
      </PanelCollection> 
      <ClientSideEvents EndCallback="function(s, e) { 
      alert(&quot;moin, main&quot;); 
       makeDraggable(document.getElementById(&quot;Mapimage&quot;)); 
      }" /> 
     </dx:ASPxCallbackPanel> 

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

海事組織，eventhandling（尤其是值從HTML元素上的動作接收）似乎不同，取決於瀏覽器...

希望你們能幫助我。

映入眼簾，

亞歷

來源

2010-10-25 Alex

你真的不明確的問題是什麼和它的困難而不能經營的網站進行調試任何東西。

但是，可能是function main()無法找到圖像控件。 ASP.NET會自動重命名您的ID以確保它們是唯一的。所以MapImage元素ID實際上是Callback_Mapimage。

function main() { 
     alert("foo"); 
     initWheelZoomEventhandler(); 
     makeDraggable(document.getElementById("Callback_Mapimage")); 
    }

在Asp.net 4中，您可以在圖像上設置ClientIdMode="static"以防止這種重命名。

來源

2010-10-25 07:30:15

感謝您的回覆geoff。如果你不知道問題是什麼，那麼確定問題真的很難...... :)我已經檢查過你指定的電話了。我得到ID爲'Mapimage'的元素，所以它不是null。似乎我忘了說我使用ASP.Net V3.5。當然你的調試語句是正確的。只是以爲你可能知道使用JavaScript和ASP.Net/devExpress組件時的一些複雜性。 – Alex 2010-10-25 07:40:01

@Alex - 你確定嗎？ Asp.net肯定會重命名該ID。看看Firebug。否則，我不知道任何與DX控件有關的複雜問題，除了它們通常會在標準控件上渲染大量額外的標記以實現其額外的功能。儘管在你的例子中，他們只是渲染標準的''元素。 – 2010-10-25 07:50:52

是的，你對ID的重命名是正確的。我再次檢查了這個圖像是否爲空，如你所說，這些圖像具有簡單的未命名的Id'Mapimage'和重命名的Id'Callback_Mapimage'。兩者都不爲空，並且在按照「document.getElementById（...）」調用它時收到元素。這看起來有點奇怪。現在，使用「Callback_Mapimage」調用平移功能可以在IE中使用，但不能在Firefox中使用。非常感謝geoff！ – Alex 2010-10-25 08:11:08

@geoff：好吧，在我的桌子上敲一些頭部之後修好它。解決方案的關鍵是重命名我不知道的ID和div/DevExpress組件的正確對齊方式。我也必須處理不同的瀏覽器類型。

這是工作的JavaScript代碼，Chrome瀏覽器，歌劇，IE和Mozilla測試：

document.onmousemove = mouseMove; 
document.onmouseup = mouseUp; 

var dragObject = null; 
var mouseOffset = null; 
var imgStartLoc = 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'; 
    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'; 

    return false; 
    } 
} 

function mouseUp() 
{ 
    dragObject = null; 

} 

function makeDraggable(item) 
{ 
    if (!item) 
    { 
    return; 
    } 

    item.onmousedown = function(ev) 
    { 
    dragObject = this; 
    ev = ev || window.event; 
    mouseOffset = mouseCoords(ev); 

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

    return false; 
    } 

}

而在HTML中使用：

<script type="text/javascript"> 

     // initialize the eventlisteners for user-interaction 
     function init() 
     { 
      makeDraggable(document.getElementById("Callback_Mapimage")); 
     } 

    </script>

感謝傑夫您的援助！

來源

2010-10-25 14:27:54 Alex

對ASP圖像進行JavaScript平移

回答

相關問題