一张图片，对它进行拖动

一张图片，对它进行拖动，当我点击它的时候，就可以拖动了。点击的时候，鼠标变成小手。求代码？js的思路也行

解决方案 »

  1.   

    <HTML>
    <title>test</title>
    <HEAD>
    <style type="text/css">
    .movestyle{cursor:move;left:100;top:100;position:absolute}
    </style>
    <script language="javascript">
    var move_obj='',z=0;//初始化,定义全局变量document.onmousedown=function(){//鼠标在对象上按下时执行一次这个函数
      if(event.srcElement.className!='movestyle')return;//如果该对象不可移动则返回
      move_obj=event.srcElement;//令move_obj带有对象,为拖动做准备
      offsetX=event.clientX-move_obj.offsetLeft;//获得此时鼠标的X坐标与对象左边缘的值
      offsetY=event.clientY-move_obj.offsetTop;//获得此时鼠标的Y坐标与对象上边缘的值
      for (i=0;i<=document.all.length-1;i++){//遍历网页中的元素
        obj=document.all.item(i);//定义对象
        if(obj.className!='movestyle')continue;//如果该对象不可移动则跳过
        n=obj.style.zIndex;//获取可移动对象的zIndex属性值
        z=Math.max(z,n);//与z值进行比较，把大的存到z里
      }
      move_obj.style.zIndex=z+1;//把活动的对象至于最高层
    }document.onmousemove=function(){//鼠标在对象上拖动时执行此函数
      if (move_obj!=''){//如果鼠标在可移动对象上拖动
        x=event.clientX-offsetX;//根据两值之差,动态的获取对象的X坐标
        y=event.clientY-offsetY;//根据两值之差,动态的获取对象的Y坐标
        move_obj.style.posLeft=x;//把X值赋给对象posLeft属性
        move_obj.style.posTop=y;//把Y值赋给对象posTop属性
        event.returnValue=false;//让事件返回假,免得发生其他操作
      }
    }document.onmouseup=function(){//鼠标按键松开时，执行此函数
      move_obj='';//令move_obj为空，不具备拖动条件
    }
    </script>
    </HEAD>
    <BODY>
    <img src="http://www.2yup.com/asp/images/asp_logo1.gif" class="movestyle">
    <font size="5" color="red" class="movestyle">可以拖动的文字</font>
    </BODY>
    </HTML>