HTML5의 자바 스크립트가있는 요소 이동

저는 div 요소 내부의 이미지를 마우스로 드래그하여지도를 이동할 수있는 웹 애플리케이션을 코딩하고 있습니다. 불행히도 IE6-9, Firefox, Chrome 및 Safari를 지원하기 위해서는 크로스 브라우저가 필요합니다. 그리고 나는 내가 자바 스크립트로 할 수있는 것에 제한을 두는 프레임 워크 안에 갇혀있다. 그래서 더 간단할수록 좋다. 아래 코드는 놀랍게도 "! DOCTYPE html"을 추가 할 때까지 작동했습니다. 오류가 무엇입니까? 이걸 어떻게 디버그하겠습니까?HTML5의 자바 스크립트가있는 요소 이동

<!DOCTYPE html> 
<html><head></head><body> 
<style> 
p{ width: 400px; background-color: gold;} 
#caption {text-align: center; font-weight: bold;} 
div div { 
width:400px; height: 140px; 
border: 1px solid green; 
background-color: lightgreen; 
display: block; 
position: relative; 
} 
div div:hover {border-color: red;} 
div > .img { 
    width: 200px; height: 100px; top: 10px; left: 20px; 
    position: absolute; 
    border: 2px solid black; 
    background-image: url('http://boallen.com/assets/images/randbitmap_true.png'); 
} 
div > .img:hover {cursor: pointer; background-color: lightgray;} 
</style> 

<div> 
<div>p 
    <span class="img" id="friend">bad ie</span> 
</div> 
<div id="thediv">Mouse in here and click<br></div> 
</div> 

<script> 
var el = document.getElementById("thediv"); 
var img = document.getElementById('friend'); 

img.onmousedown = function (event) { 
    img.moving=true; 
    img.mouseX=(window.event ? window.event.x: event.clientX) - img.offsetLeft; 
    img.mouseY=(window.event ? window.event.y: event.clientY) - img.offsetTop; 
    el.innerHTML += 'Mouse DOWN '; 
} 
img.onmousemove = function (event) { 
    if(!img.moving) return; 
    img.style.left=(window.event ? window.event.x: event.clientX) - img.mouseX; 
    img.style.top=(window.event ? window.event.y: event.clientY) - img.mouseY; 
    stat.innerHTML += "M-M "; 
} 
img.onmouseup = function (event) { 
    this.moving = false; 
    el.innerHTML += 'Mouse released '; 
} 
</script> 
</body> 
</html>

은 디버깅, 디버거/DOM 관리자로 단계별로, 일반적인 용어

출처

2013-04-12 David

(IE9, 파이어 폭스 및 크롬에 http://htmledit.squarefree.com/ 테스트). 적용되는 CSS를보십시오. 어느 CSS 규칙이 캐스케이드에서 우승하는지보십시오. 유효하지 않은 CSS 규칙을 찾아보십시오.

left 및 top 속성은 숫자가 아닌 길이를 허용합니다. 값에 단위를 넣지 않았습니다.

(단점 모드 인 경우 일부 브라우저는 99은 의미가없는 경우 99 픽셀을 의미 함).

출처

2013-04-12 14:09:51 Quentin

감사합니다. – David

솔루션, onmousemove의 변경 : img.style.left = ((window.event? window.event.x : event.clientX) - img.mouseX) + "px"; (img.mouseY) + "px"; – David

HTML5의 자바 스크립트가있는 요소 이동

답변

관련 문제