The drag doesn't work when it has a siblings img in IE

问题

I'm trying to make a drag box with a sibling img and the 'move-obj' can be dragged.It runs correctly in other browser but IE(8,9,10). In IE, just while you hover the border can you drag the 'move-obj', but if you remove the tag 'img' it work correctly.I found that if I add a background-color to the 'move-obj',it will run correctly too, but it isn't what I want. Can somebody give me some advice?Here is the 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>

回答1:

If I understand you correctly if and only if you are hovering over the mov-obj div you want to be able to move around the https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTE2qkLv64zdI4z5uIbE1oSMmI0AiQcbwbhAYAyI0cF2Dwg88tb image, right?

If this is what you want, look into either using jQuery and selecting the div on a hover event

$(.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
}

or you can use pure 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);

maybe set a flag letting you know that the mouseenter has happened, but not the mouseleave event

and then if and only if the mouse is inside the div add a click event to the div

while the click is pressed and the mouseleave event hasn't been triggered dynamically relocate the image depending on how much the mouse pointer has moved

(you can add a click event like this fyi)

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

or with jQuery

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

hope this helps

Edit, just paste this code into a browser and try it out:

Note: this only works if you don't move the mouse outside of the div's width and height that you are wanting to move. I'll let you figure out how to fix that part if the mouse goes outside the div what happens

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

来源：https://stackoverflow.com/questions/35642593/the-drag-doesnt-work-when-it-has-a-siblings-img-in-ie

标签

javascript

jquery

html

css

css-hack