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

我想与兄弟img做一个拖拽框，'move-obj'可以被拖拽。它在其他浏览器中正确运行，但IE（ 8,9,10）。在IE中，只是当你将鼠标悬停在边框可以拖动“移动 - 目标”，但如果去掉标签“IMG”它的工作correctly.I发现，如果我添加背景色为“移动 - 目标”，它也会正确运行，但它不是我想要的。有人能给我一些建议吗？这里是codepen 拖动不起作用，当它在IE中有一个兄弟姐妹img

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

来源

2016-02-26 yzajoee

如果我理解你正确的，当且仅当您将鼠标悬停在MOV-OBJ DIV要能够围绕https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTE2qkLv64zdI4z5uIbE1oSMmI0AiQcbwbhAYAyI0cF2Dwg88tb图像移动，对不对？

如果这是你想要的，考虑要么使用jQuery和悬停事件

$(.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事件尚未触发动态根据鼠标指针多少移动

搬迁图像（你可以这样FYI添加click事件）

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 
}

希望这有助于

编辑，菊ST这段代码粘贴到浏览器，并尝试一下：

注：如果这仅适用于你不动鼠标的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>

来源

2016-02-26 05:33:02

我很抱歉没有照亮问题，我添加了一些代码到代码笔。 Actuall我想拖动'move-obj'，但它不适用于IE浏览器。 – yzajoee

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

回答

相关问题