0

タグ<div>付きのを含むASP.Netページがあります。<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以外のページでも正常に機能することに注意してください。

この問題を引き起こしているASP.NetJavascriptに何かがありますか？<div>ASP.Netで機能するブロック内でJPEGをパンするための提案はありますか？jQueryUIライブラリを使用してみましたが、結果は同じです。

4

1 に答える 1

1

div「divInnerDiv」は次のようにスタイルする必要があります

positition: relative;

imgの順序で

position: absolute;

divの原点から配置されます。それ以外の場合は、ページの原点から絶対的に配置されます。ドキュメントの流れではなく手動で配置したい場合は、divを絶対に配置することもできると思います。

firefox/chrome にはいくつかの異なる問題がありますが、家に帰る時が来ました。

編集: 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ではなくページのどこにあるかを知りたいからです。

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

この後、すべてがうまくいくはずです。

于 2010-03-17T22:08:54.267 に答える