在ff下第一次拖放没问题,但是第二次却拖不鸟(鼠标不离开元素,mousemove事件下元素也可以动),在 ie6、7、8 chrome,opera 下效果正常。
代码如下:<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>Test</title>
<style type="text/css"><!--
.a {
position:absolute;
left:100px; top:100px;
width:100px; height:115px; background:#eee;
cursor:move;
}
--></style>
</head>
<body>
<div id="a" class="a"></div>
<script type="text/javascript">//<![CDATA[
var _IsMousedown = 0;
document.getElementById('a').onmousedown = function(e){
_IsMousedown = 1;
var cx = offsetX(e) , cy = offsetY(e);
this.onmousemove = function(e){
if(_IsMousedown == 0){
return false;
}
var x = getX(e) , y = getY(e);
this.style.left = x - cx + 'px';
this.style.top = y - cy + 'px';
}
this.onmouseup = this.onmouseout = function(){
_IsMousedown = 0;
}
}
function offsetX( e ){
e = e || window.event;
return e.layerX || e.offsetX;
}
function offsetY( e ){
e = e || window.event;
return e.layerY || e.offsetY;
}
function getX( e ){
e = e || window.event;
return e.pageX || e.clientX;
}
function getY( e ){
e = e || window.event;
return e.pageY || e.clientY;
}
//]]></script>
</body>
</html>
代码如下:<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>Test</title>
<style type="text/css"><!--
.a {
position:absolute;
left:100px; top:100px;
width:100px; height:115px; background:#eee;
cursor:move;
}
--></style>
</head>
<body>
<div id="a" class="a"></div>
<script type="text/javascript">//<![CDATA[
var _IsMousedown = 0;
document.getElementById('a').onmousedown = function(e){
_IsMousedown = 1;
var cx = offsetX(e) , cy = offsetY(e);
this.onmousemove = function(e){
if(_IsMousedown == 0){
return false;
}
var x = getX(e) , y = getY(e);
this.style.left = x - cx + 'px';
this.style.top = y - cy + 'px';
}
this.onmouseup = this.onmouseout = function(){
_IsMousedown = 0;
}
}
function offsetX( e ){
e = e || window.event;
return e.layerX || e.offsetX;
}
function offsetY( e ){
e = e || window.event;
return e.layerY || e.offsetY;
}
function getX( e ){
e = e || window.event;
return e.pageX || e.clientX;
}
function getY( e ){
e = e || window.event;
return e.pageY || e.clientY;
}
//]]></script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>Test</title>
<style type="text/css"><!--
.a {
position:absolute;
left:100px; top:100px;
width:100px; height:115px; background:#eee;
cursor:move;
}
--></style>
</head>
<body>
<div id="a" class="a"></div>
<script type="text/javascript">//<![CDATA[
//var _IsMousedown = 0;
document.getElementById('a').onmousedown = function(e){
// _IsMousedown = 1;
var cx = offsetX(e) , cy = offsetY(e);
this.onmousemove = function(e){
// if(_IsMousedown == 0){
// return false;
// }
var x = getX(e) , y = getY(e);
this.style.left = x - cx + 'px';
this.style.top = y - cy + 'px';
return false;
}
this.onmouseup = this.onmouseout = function(){
//_IsMousedown = 0;
this.onmousemove = null;
return false;
}
return false;
}
function offsetX( e ){
e = e || window.event;
return e.layerX || e.offsetX;
}
function offsetY( e ){
e = e || window.event;
return e.layerY || e.offsetY;
}
function getX( e ){
e = e || window.event;
return e.pageX || e.clientX;
}
function getY( e ){
e = e || window.event;
return e.pageY || e.clientY;
}
//]]></script>
</body>
</html>
http://chy2z.blog.163.com/blog/static/31668846200710253058200/