当 IE 中有兄弟 img 时，拖动不起作用答案

【问题标题】：The drag doesn't work when it has a siblings img in IE当 IE 中有兄弟 img 时，拖动不起作用
【发布时间】：2016-06-09 03:07:12
【问题描述】：

我正在尝试制作一个带有兄弟 img 的拖动框，并且可以拖动“move-obj”。它可以在 IE(8,9,10) 之外的其他浏览器中正常运行。在 IE 中，当您悬停边框时，您可以拖动“move-obj”，但如果您删除标签“img”它可以正常工作。我发现如果我向“move-obj”添加背景颜色，它也会正确运行，但这不是我想要的。有人可以给我一些建议吗？这里是codepen

<!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>

【问题讨论】：

标签： javascript jquery html css css-hack

【解决方案1】：

如果我理解正确当且仅当您将鼠标悬停在 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>

【讨论】：

很抱歉没有说明问题，我在代码笔中添加了一些代码。其实我想拖动'move-obj'，但是在IE浏览器上不行。