拖動不起作用，當它在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

回答

相關問題