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>
//--------------------html----------------------------////------------------------这个是js-----------------------------//
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);}
}
//-------------------javascript----------------------//(打包好的源码在习科论坛,csdn不让上传啊)JavaScript源代码飘动拖拽

解决方案 »

  1.   

    拖拽事件一般是绑定的 body上的 mousedown 确认被拖拽的元素 也就是 事件中的目标对象mousemove 的时候 如果有拖拽元素 则 进行相应的 计算移动mouseup 的时候  清空当前的拖拽元素
      

  2.   

    http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.dd.DD
      

  3.   

    不好意思~这个也是拖拽,ext js发现个好框架哈...拖拽jquery ui也有
    但是和我问的问题也不一样~
    拖拽的代码已经实现了
    但是和飘动写在一起就出问题了
    我问的问题是代码整合在一起的时候哪里出错了?
      

  4.   

    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(){
    }