javascript实现拖拽与自由移动的问题
题目要起得有技术含量?
貌似太短了..来不及想
内容是一个刚学几天的js菜鸟蛋疼的问题.
这个问题困扰我挺长时间了
我也是为了让自己能不浪费时间写了个东西玩
具体文章在我空间
http://bbs.blackbap.org/space-uid-2606.html
也是很蛋疼的卡在一个地方,所以在想是不是先转入后台程序开发?
自由移动实现成功了,很简单的漂浮广告的原理,在在上面链接的文章中也有不能再详细的注释
然后在实现拖拽的时候出了问题
拖拽功能写好了
但是在合在一起的时候就蛋疼了
本来自由移动的青年被拖拽了一下以后就不动了~!
纠结...
所来让各位大牛来看看啦
下面附上源码给大家看
//--------------------------这个是html的----------------------------//
<html>
<head>
<title>凉宫跑来跑去喵~</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<DIV id="div1"
style="Z-INDEX: 100;
LEFT: 2px;
WIDTH: 120px;
POSITION: absolute;
TOP: 43px;
HEIGHT: 120px;
visibility: visible;">
<img id="img1"
src="bg.jpg"
border="0"
height="130"
width="130"
onMouseDown="EIFaction()"
draggable="false"
/>
</DIV>
<SCRIPT src="js.js"></SCRIPT>
</body>
</html>
var EIFx = 300;//EIF初始X坐标
var EIFy = 200;//EIF初始Y坐标
var speed = 30; //计时器参数
var step = 1;//精灵移动速度
var Ylimit = 0;//Y坐标极限范围
var Xlimit = 0;//X坐标极限范围
var Xc = true;//X反向移动参数
var Yc = true;//Y反向移动参数
var EIFh = 0;//EIF身高
var EIFw = 0;//EIF肥胖~卖个萌嘿嘿
var Timer;//计时器
window.onload = function(){
img1.visibility = "visible";//设置img1元素为可见;
Timer = setInterval('EIFmove()', speed);//设置interval代表计时器,并设置周期为speed值,每周期执行一次EIFmove()
Xlimit = document.body.clientWidth;//获取body宽度;
Ylimit = document.body.clientHeight;//获取body高度;
EIFh = div1.offsetHeight;
EIFw = div1.offsetWidth;
var oDiv = document.getElementById('div1')
oDiv.onmousedown = function (){
document.getElementById('img1').src="over.gif"
document.onmousemove =function (ev){
var oEvent = ev || event
left=oDiv.style.left = oEvent.clientX+'px';
top=oDiv.style.top = oEvent.clientY+'px';
EIFx=left;
EIFy=top;
}
document.onmouseup = function ()
{
document.onmousemove = null;
document.getElementById('img1').src="bg.jpg"
}
}
}
function EIFmove()
{
div1.style.left = EIFx + document.body.scrollLeft;
div1.style.top = EIFy + document.body.scrollTop;
if (Yc)
{EIFy = EIFy + step;}
else
{EIFy = EIFy - step;}
if (EIFy < 10)
{Yc = true;EIFy = 10;}
if (EIFy >= (Ylimit - EIFh))
{Yc = false;EIFy = (Ylimit - EIFh);}
if (Xc)
{EIFx = EIFx + step;}
else
{EIFx = EIFx - step;}
if (EIFx < 10)
{Xc = true;EIFx = 10;}
if (EIFx >= (Xlimit - EIFw))
{Xc = false;EIFx = (Xlimit - EIFw);}
}
var EIFx = 300;//EIF初始X坐标
var EIFy = 200;//EIF初始Y坐标
var speed = 30; //计时器参数
var step = 1;//精灵移动速度
var Ylimit = 0;//Y坐标极限范围
var Xlimit = 0;//X坐标极限范围
var Xc = true;//X反向移动参数
var Yc = true;//Y反向移动参数
var EIFh = 0;//EIF身高
var EIFw = 0;//EIF肥胖~卖个萌嘿嘿
var Timer;//计时器
var EICANFLY = true;//是否允许飘
window.onload = function(){
img1.visibility = "visible";//设置img1元素为可见;
Timer = setInterval('EIFmove()', speed);//设置interval代表计时器,并设置周期为speed值,每周期执行一次EIFmove()
Xlimit = document.body.clientWidth;//获取body宽度;
Ylimit = document.body.clientHeight;//获取body高度;
EIFh = div1.offsetHeight;
EIFw = div1.offsetWidth;
var oDiv = document.getElementById('div1')
oDiv.onmousedown = function (){
EICANFLY = false;
document.getElementById('img1').src="over.gif"
document.onmousemove =function (ev){
var oEvent = ev
[解决办法]
event
left=oDiv.style.left = oEvent.clientX+'px';
top=oDiv.style.top = oEvent.clientY+'px';
EIFx=parseInt(left);
EIFy=parseInt(top);
}
document.onmouseup = function ()
{
EICANFLY = true;
document.onmousemove = null;
document.getElementById('img1').src="bg.jpg"
}
}
}
function EIFmove()
{
if(!EICANFLY){
return;
}
div1.style.left = EIFx + document.body.scrollLeft;
div1.style.top = EIFy + document.body.scrollTop;
if (Yc)
{EIFy = EIFy + step;}
else
{EIFy = EIFy - step;}
if (EIFy < 10)
{Yc = true;EIFy = 10;}
if (EIFy >= (Ylimit - EIFh))
{Yc = false;EIFy = (Ylimit - EIFh);}
if (Xc)
{EIFx = EIFx + step;}
else
{EIFx = EIFx - step;}
if (EIFx < 10)
{Xc = true;EIFx = 10;}
if (EIFx >= (Xlimit - EIFw))
{Xc = false;EIFx = (Xlimit - EIFw);}
}
function EIFaction(){
}
