在HTML5中使用JavaScript移动元素
我正在编写一个web应用程序,用户可以通过鼠标拖动div元素中的图像来平移地图。不幸的是,我需要它是跨浏览器的,以支持IE6-9、Firefox、Chrome和Safari。我被困在一个框架中,这个框架限制了我使用javascript的能力,所以越简单越好。下面的代码(令人惊讶地)工作正常,直到我添加了“!DOCTYPE html”。怎么了?你将如何调试这个在HTML5中使用JavaScript移动元素,javascript,html,drag-and-drop,Javascript,Html,Drag And Drop,我正在编写一个web应用程序,用户可以通过鼠标拖动div元素中的图像来平移地图。不幸的是,我需要它是跨浏览器的,以支持IE6-9、Firefox、Chrome和Safari。我被困在一个框架中,这个框架限制了我使用javascript的能力,所以越简单越好。下面的代码(令人惊讶地)工作正常,直到我添加了“!DOCTYPE html”。怎么了?你将如何调试这个 <!DOCTYPE html> <html><head></head><body&g
<!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>
p{宽度:400px;背景色:金色;}
#标题{文本对齐:居中;字体大小:粗体;}
div div{
宽度:400px;高度:140px;
边框:1px纯绿色;
背景颜色:浅绿色;
显示:块;
位置:相对位置;
}
div div:hover{边框颜色:红色;}
div>.img{
宽度:200px;高度:100px;顶部:10px;左侧:20px;
位置:绝对位置;
边框:2件纯黑;
背景图像:url('http://boallen.com/assets/images/randbitmap_true.png');
}
div>.img:hover{光标:指针;背景色:浅灰色;}
P
坏家伙
将鼠标移到此处并单击
var el=document.getElementById(“thediv”);
var img=document.getElementById('friend');
img.onmousedown=函数(事件){
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+=“鼠标按下”;
}
img.onmousemove=函数(事件){
如果(!img.moving)返回;
左=(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=函数(事件){
this.moving=false;
el.innerHTML+=“鼠标已释放”;
}
(在IE9、Firefox和Chrome上测试)一般来说,对于调试,请使用调试器/dom检查器逐步完成。看看正在应用的CSS。看看哪些CSS规则赢得了级联。查看哪些CSS规则被删除为无效
left
和top
属性接受长度而不是数字。您没有在值上添加任何单位
(在怪癖模式下,一些浏览器认为
99
意味着99个像素,而这并不意味着什么)。解决方案是改变onmousemove:img.style.left=((window.event?window.event.x:event.clientX)-img.mouseX)+“px”;img.style.top=((window.event?window.event.y:event.clientY)-img.mouseY)+“px”;