当它在IE中具有兄弟姐妹img时，拖动不起作用

我正在尝试制作一个带有同级 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>

如果我正确理解你，当且仅当你将鼠标悬停在 mov-objdiv 上时，你才希望能够在 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);

也许设置一个标志，让您知道鼠标输入已经发生，但不是鼠标离开事件

然后当且仅当鼠标在div 内时，向div 添加一个 Click 事件

当单击被按下且尚未触发 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>

相关内容

最新更新

热门标签：