js鼠标拖动div
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><style...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#over{width: 100px;height: 30px;background: red;position: absolute;left: 20px;top: 500px;}
</style>
</head>
<body>
<div id="over" onmousedown="down(this,event)" onmousemove="move(this,event)" onmouseup="seup(this,event)">
</div>
<script type="text/javascript">
var posX,posY;
var downX,downY;
var mark=false;
function down(obj,event)
{
obj.style.cursor="move";
posX=obj.style.left;
posY=obj.style.top;
downX=event.clientX;
downY=event.clientY;
mark=true;
}
function move(obj,event)
{
var moveX=event.clientX;
var moveY=event.clientY;
if (mark) {
obj.style.left=parseInt(moveX) + parseInt(posX) - parseInt(downX) + "px";
obj.style.top=parseInt(moveY) + parseInt(posY) - parseInt(downY)+ "px";
}
}
function seup(obj,event)
{
if (mark) {
var moveX=event.clientX;
var moveY=event.clientY;
obj.style.left=parseInt(moveX) + parseInt(posX) - parseInt(downX)+ "px";
obj.style.top=parseInt(moveY) + parseInt(posY) - parseInt(downY)+ "px";
downX=moveX;
downY=moveY;
}
obj.style.cursor="default";
mark = false;
}
</script>
</body>
</html> 我的代码不能实现拖动，就改变了鼠标的样式；请问错在哪里？研究好长时间都没有明白 展开
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#over{width: 100px;height: 30px;background: red;position: absolute;left: 20px;top: 500px;}
</style>
</head>
<body>
<div id="over" onmousedown="down(this,event)" onmousemove="move(this,event)" onmouseup="seup(this,event)">
</div>
<script type="text/javascript">
var posX,posY;
var downX,downY;
var mark=false;
function down(obj,event)
{
obj.style.cursor="move";
posX=obj.style.left;
posY=obj.style.top;
downX=event.clientX;
downY=event.clientY;
mark=true;
}
function move(obj,event)
{
var moveX=event.clientX;
var moveY=event.clientY;
if (mark) {
obj.style.left=parseInt(moveX) + parseInt(posX) - parseInt(downX) + "px";
obj.style.top=parseInt(moveY) + parseInt(posY) - parseInt(downY)+ "px";
}
}
function seup(obj,event)
{
if (mark) {
var moveX=event.clientX;
var moveY=event.clientY;
obj.style.left=parseInt(moveX) + parseInt(posX) - parseInt(downX)+ "px";
obj.style.top=parseInt(moveY) + parseInt(posY) - parseInt(downY)+ "px";
downX=moveX;
downY=moveY;
}
obj.style.cursor="default";
mark = false;
}
</script>
</body>
</html> 我的代码不能实现拖动，就改变了鼠标的样式；请问错在哪里？研究好长时间都没有明白 展开
展开全部
你的obj.style.left是获取不到的因为该div没有设置style属性所以只要将样式改为行内就行了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文哥讨厌IE</title>
</head>
<body>
<div id="over" onmousedown="down(this,event)" style="width:100px;height:30px;background:red;position:absolute;left:20px;top:500px;" onmousemove="move(this,event)" onmouseup="seup(this,event)">
</div>
<script type="text/javascript">
var posX,posY;
var downX,downY;
var mark=false;
function down(obj,event)
{
obj.style.cursor="move";
posX=obj.style.left;
posY=obj.style.top;
downX=event.clientX;
downY=event.clientY;
mark=true;
///alert(posX);
///alert(posY);
}
function move(obj,event)
{
var moveX=event.clientX;
var moveY=event.clientY;
if (mark) {
obj.style.left=parseInt(moveX) + parseInt(posX) - parseInt(downX) + "px";
obj.style.top=parseInt(moveY) + parseInt(posY) - parseInt(downY)+ "px";
}
}
function seup(obj,event)
{
if (mark) {
var moveX=event.clientX;
var moveY=event.clientY;
obj.style.left=parseInt(moveX) + parseInt(posX) - parseInt(downX)+ "px";
obj.style.top=parseInt(moveY) + parseInt(posY) - parseInt(downY)+ "px";
downX=moveX;
downY=moveY;
}
obj.style.cursor="default";
mark = false;
}
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<div id="box1" style = 'width:100px; height: 100px; background:#ccc; position:fixed;'></div>
<!-- 注意 盒子一定要定位 position:fixed; 或者 position:absolute;-->
</body>
<script type="text/javascript">
function getPos(e){//这是一个 获取鼠标位置的函数
var oEvent = e || event;
return {x: oEvent.clientX + document.documentElement.scrollLeft || document.body.scrollLeft,
y: oEvent.clientY +document.documentElement.scrollTop || document.body.scrollTop};
}
document.getElementById('box1').onmousedown = function(e){ //你要拖动对象在mousedown的时候发生的事情
var oEvent = e || event;
var pos = getPos(oEvent);
var _this = this;
_this.style.cursor = 'move';//改变鼠标状态
_this.disY = pos.y - _this.offsetTop;
_this.disX = pos.x - _this.offsetLeft;
document.onmousemove =function(e){ //在鼠标按下的时候 并且 移动的时候 发生的事情
var oEvent = e || event;
var dpos = getPos(oEvent);
var t = dpos.y-_this.disY ; //移动的时候获取的 移动 top值
var l = dpos.x-_this.disX ;//移动的时候获取的 移动 left
_this.style.top=t + "px"; //这两条给盒子赋值
_this.style.left=l + "px";
};
document.onmouseup = function(){//鼠标弹起的时候做的事情 一些释放 操作
_this.style.cursor = 'pointer'
this.onmousemove = null;
this.onmouseup = null;
try{
_this.releaseCapture();}catch(e){}
};
try{
_this.setCapture();}catch(b){} //这里是为了 让盒子拖动的时候不要复制页面里面的其他内容
return false;
};
</script>
</html>
这是我写的代码 你参照一下
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<div id="box1" style = 'width:100px; height: 100px; background:#ccc; position:fixed;'></div>
<!-- 注意 盒子一定要定位 position:fixed; 或者 position:absolute;-->
</body>
<script type="text/javascript">
function getPos(e){//这是一个 获取鼠标位置的函数
var oEvent = e || event;
return {x: oEvent.clientX + document.documentElement.scrollLeft || document.body.scrollLeft,
y: oEvent.clientY +document.documentElement.scrollTop || document.body.scrollTop};
}
document.getElementById('box1').onmousedown = function(e){ //你要拖动对象在mousedown的时候发生的事情
var oEvent = e || event;
var pos = getPos(oEvent);
var _this = this;
_this.style.cursor = 'move';//改变鼠标状态
_this.disY = pos.y - _this.offsetTop;
_this.disX = pos.x - _this.offsetLeft;
document.onmousemove =function(e){ //在鼠标按下的时候 并且 移动的时候 发生的事情
var oEvent = e || event;
var dpos = getPos(oEvent);
var t = dpos.y-_this.disY ; //移动的时候获取的 移动 top值
var l = dpos.x-_this.disX ;//移动的时候获取的 移动 left
_this.style.top=t + "px"; //这两条给盒子赋值
_this.style.left=l + "px";
};
document.onmouseup = function(){//鼠标弹起的时候做的事情 一些释放 操作
_this.style.cursor = 'pointer'
this.onmousemove = null;
this.onmouseup = null;
try{
_this.releaseCapture();}catch(e){}
};
try{
_this.setCapture();}catch(b){} //这里是为了 让盒子拖动的时候不要复制页面里面的其他内容
return false;
};
</script>
</html>
这是我写的代码 你参照一下
追问
这类代码网上一大堆，随便找得到，但是我想知道的是我错在哪里，帮忙分析下我的代码，看问题出在哪里
追答
你的变量定义有问题， 到了别的函数里面会变成 NaN， 把变量设置好了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
