0

兄弟の img を使用してドラッグ ボックスを作成しようとしていますが、「move-obj」をドラッグできます。他のブラウザーでは正しく動作しますが、IE(8,9,10) です。IE では、境界線をホバーしている間だけ「move-obj」をドラッグできますが、タグ「img」を削除すると正しく機能します。「move-obj」に背景色を追加すると、それも正しく実行されますが、それは私が望むものではありません。誰かアドバイスをくれませんか？ここにコードペンがあります

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrap{
            position: relative;
            width: 100%;
            height: 100%;
            background-color: #f0f0f0;
            padding: 10%;
        }
        .wrap-inside{
            position: relative;
            width: 500px;
            height: 500px;
            border: 1px solid #ddd;
        }
        .move-obj{
            cursor: move;
            position: absolute;
            width: 100px;
            height: 100px;
            border: 1px solid blue;
        }
        .bg{
            width: 500px;
            height: 500px;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <img class="bg" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTE2qkLv64zdI4z5uIbE1oSMmI0AiQcbwbhAYAyI0cF2Dwg88tb" alt="">
        <div class="wrap-inside">
            <div class="move-obj"></div>
        </div>
    </div>
</body>
</html>
4

1 に答える 1

0

https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTE2qkLv64zdI4z5uIbE1oSMmI0AiQcbwbhAYAyI0cF2Dwg88tb画像を移動できるようにしたい mov-obj div の上にカーソルを置いている場合にのみ、あなたを正しく理解していれば、そうですか?

これが必要な場合は、jQuery を使用して、ホバー イベントで div を選択することを検討してください。

$(.mov-obj).hover(function(event) {
    //change the x and y coordinates of the image dynamically here of the image
    //you can use the event.pageX and event.pageY (I think) to get how much/many pixels have been moved since the hover happened
}

または、純粋な JavaScript を使用できます

document.getElementsByClassName("mov-obj").addEventListener("mouseenter", function( event ) {
//do something to change the img position dynamically
}, false);

//also do it for the mouseleave event
document.getElementsByClassName("mov-obj").addEventListener("mouseleave", function( event ) {
//do something to change the img position dynamically
}, false);

mouseenter が発生したことを知らせるフラグを設定するかもしれませんが、mouseleave イベントは発生しません

そして、マウスがdiv内にある場合にのみ、クリックイベントをdivに追加します

クリックが押され、mouseleave イベントがトリガーされていない間、マウス ポインターの移動量に応じて画像を動的に再配置します。

（このfyiのようなクリックイベントを追加できます）

document.getElementsByClassName("mov-obj").addEventListener("click", function( event ) {
//do something to change the img position dynamically
}, false);

またはjQueryで

$(.mov-obj).click(function(event) {
    //do something
}

お役に立てれば

編集して、このコードをブラウザに貼り付けて試してみてください。

注: これは、移動したい div の幅と高さの外にマウスを移動しない場合にのみ機能します。マウスがdivの外に出た場合にその部分を修正する方法を理解させます

<DOCTYPE html>
<html>
<head>
</head>

<body>

<style>
#div1 {
    border: 2px orange solid;
    width: 500px;
    height: 500px;
}

#div2 {
    border: 2px purple solid;
    width: 250px;
    height: 250px;
    position: absolute;
}

</style>

<div id="div1">
    <div id="div2">
    </div>
</div>

<script type="text/javascript">
    // add event listeners to div
   var div2 = document.getElementById("div2");
    div2.addEventListener("mousedown", getOriginalPosition, false);
    div2.addEventListener("mouseup", changeLocation, false);

    var helperX;
    var helperY;

    function getOriginalPosition(event) {
        //use these to help with the calculation later
        helperX = event.offsetX;
        helperY = event.offsetY;

    }

    var end_xPosition;
    var end_yPosition;

    function changeLocation(event) {
        end_xPosition = event.pageX;
        end_yPosition = event.pageY;

        div2.style.left = end_xPosition - helperX;
        div2.style.top = end_yPosition - helperY;
    }

</script>


</body>


</html>
于 2016-02-26T05:33:02.217 に答える