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

如果我理解正确，当且仅当您将鼠标悬停在 mov-obj div 上时，您希望能够在https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTE2qkLv64zdI4z5uIbE1oSMmI0AiQcbwbhAYAyI0cF2Dwg88tb图像上移动，对吧？

如果这是您想要的，请查看使用 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 事件没有被触发时，根据鼠标指针移动了多少动态地重新定位图像

（您可以像这样添加点击事件）

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 回答