0

jQuery の mousemove、mouseup、および mousemove イベントを使用して IE8 で div をパンしようとすると問題が発生します。マウスダウンを押すと、マウスボタンを離すまでマウスムーブが検出されず、マウスアップを検出するには、マウスボタンをもう一度押す必要があります。

これがJavaScriptです：

// ********** CLICK AND DRAG MAP PANNING ********** //
            var mouseDown = false;
            var mouseX = 0;
            var mouseY = 0;
            var originalLeft = $("#layout").offset().left;
            var originalTop = $("#layout").offset().top;

            $("#layout").mousedown(function(event){
                mouseDown = true;
                mouseX = event.pageX;
                mouseY = event.pageY;
                originalLeft = $("#layout").offset().left;
                originalTop = $("#layout").offset().top;
                return false;
            });

            $(document).mouseup(function(){
                mouseDown = false;
                return false;
            });

            $(document).mousemove(function(event){
                if (mouseDown == true) {
                    var panLeft = (event.pageX - mouseX);
                    var panTop = (event.pageY - mouseY);
                    var left = originalLeft + panLeft;
                    var top = originalTop + panTop;

                    // Constrain the map
                    var container = $("#map");
                    var map = $("#layout");

                    if (left >= container.offset().left) {
                        left = container.offset().left;
                    } else if (left + map.width() <= container.offset().left + container.width()) {
                        left = container.offset().left + container.width() - map.width();
                    }

                    if (top >= container.offset().top) {
                        top = container.offset().top;
                    } else if (top + map.height() <= container.offset().top + container.height()) {
                        top = container.offset().top + container.height() - map.top();
                    }

                    $("#layout").offset({ left: left, top: top });
                } else {
                    return false;
                }
            });
            // ********** ********** ********** //

html は次のとおりです。

<div id="map">
    <div id="layout">
        <img src="images/map.png" alt="map"/>
    </div>
</div>

#layout div の画像は、div と同じサイズに設定されます。IE8 では、画像をドラッグしようとしていると思われる問題が発生する可能性があると思います。これが当てはまるかどうかはわかりませんが、代わりに背景にすることを考えましたが、IE は background-size プロパティを使用しないため、適切なサイズにできません。背景を使うために画像を小さくすると、拡大するとぼやけてしまいます。

4

1 に答える 1

2

あなたが にバインドmousedownし#layout、他の 2 つが にバインドされていることが原因である可能性がありますdocument。以下を追加してみてください:

if ( 'attachEvent' in document ) {
    document.attachEvent('ondragstart', function() { return false; });
}

IE でのドラッグを防止するには

于 2012-09-06T15:59:43.647 に答える