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

南楼画角 提交于 2019-12-02 08:44:56

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>
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!