Javascript 阻力不小于'；当IE中有一个img时，它不会工作_Javascript_Jquery_Html_Css_Css Hack

Javascript 阻力不小于'；当IE中有一个img时，它不会工作

javascript jquery html css

Javascript 阻力不小于'；当IE中有一个img时，它不会工作,javascript,jquery,html,css,css-hack,Javascript,Jquery,Html,Css,Css Hack,我正在尝试制作一个带有同级img的拖动框，可以拖动“move obj”。它在其他浏览器中运行正常，但IE（8,9,10）除外。在IE中，当您悬停边界时，您可以拖动“移动对象”，但如果您删除标记“img”，它将正常工作。我发现，如果我为“移动对象”添加背景色，它也将正常运行，但这不是我想要的。谁能给我一些建议吗？这是答案文件 .包裹{ 位置：相对位置；宽度：100%；身高：100%；背景色：#f0；填充：10%； } .包在里面{ 位置：相对位置；宽度：500px；高度：500px

我正在尝试制作一个带有同级img的拖动框，可以拖动“move obj”。它在其他浏览器中运行正常，但IE（8,9,10）除外。在IE中，当您悬停边界时，您可以拖动“移动对象”，但如果您删除标记“img”，它将正常工作。我发现，如果我为“移动对象”添加背景色，它也将正常运行，但这不是我想要的。谁能给我一些建议吗？这是答案


文件
.包裹{
位置：相对位置；
宽度：100%；
身高：100%；
背景色：#f0；
填充：10%；
}
.包在里面{
位置：相对位置；
宽度：500px；
高度：500px；
边框：1px实心#ddd；
}
.移动对象{
光标：移动；
位置：绝对位置；
宽度：100px；
高度：100px；
边框：1px纯蓝色；
}
.bg{
宽度：500px；
高度：500px；
位置：绝对位置；
}

如果我理解正确，当且仅当您悬停在mov obj div上时，您希望能够在图像周围移动，对吗

如果这正是您想要的，可以研究使用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添加一个click事件

当按下单击且未触发mouseleave事件时，根据鼠标指针移动的程度动态重新定位图像

（您可以添加类似于此供参考的点击事件）

或者使用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>


#第一组{
边框：2倍橙色固体；
宽度：500px；
高度：500px；
}
#第二组{
边框：2件紫色纯色；
宽度：250px；
高度：250px；
位置：绝对位置；
}
//将事件侦听器添加到div
var div2=document.getElementById（“div2”）；
div2.addEventListener（“mousedown”，getOriginalPosition，false）；
第2部分。addEventListener（“mouseup”，changeLocation，false）；
var-helperX；
var帮助；
函数getOriginalPosition（事件）{
//使用这些帮助以后进行计算
helperX=event.offsetX；
helperY=event.offsetY；
}
变量结束位置；
变量结束位置；
功能更改位置（事件）{
结束位置=event.pageX；
结束位置=event.pageY；
div2.style.left=结束位置-helperX；
div2.style.top=结束位置-帮助；
}

很抱歉没有说明问题，我在代码笔中添加了一些代码。实际上我想拖动“move obj”，但它在IE浏览器上不起作用。

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

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