jquery 和 javascript 实现层的拖动
一、首先是jquery

<!-- 层的拖动 -->
<SCRIPT type="text/javascript">

jQuery(function($){
    dragStart("canDragDiv");
   });


  //所有函数的参数‘id’为可拖动层的id

  var MouseX = 0;  //记录鼠标x轴坐标
  var MouseY = 0;  //记录鼠标y轴坐标

  //开始拖动
  function dragStart(id){

   //绑定鼠标滑过事件
   $("#"+id).bind("mouseover",function(){

     //绑定鼠标按下事件
     $("#"+id).bind("mousedown",function(){
       MouseX = 0;
       MouseY = 0;
       doDrag(id);
      });
    });

      //绑定鼠标松开事件
   $("#"+id).bind("mouseup",function(){
    dragEnd(id);
    });
  }

  //拖动
  function doDrag(id){

   //绑定鼠标移动事件
   $("#"+id).bind("mousemove",function(){

        //记录鼠标x、y轴坐标
        var x = event.clientX;
        var y = event.clientY;

        //记录拖动层x、y轴坐标
        var dragDivX = $("#"+id).offset().left;
        var dragDivY = $("#"+id).offset().top;

        //得到上次鼠标坐标
        if(MouseX != 0) {
         x = MouseX;
        }
        if(MouseY != 0) {
         y = MouseY;
        }

        //记录本次鼠标坐标
        MouseX = event.clientX;
        MouseY = event.clientY;

        //记录鼠标偏移量
     var moveX = MouseX - x;
     var moveY = MouseY - y;

     //移动层
     $("#"+id).css("left",parseFloat(dragDivX) + parseFloat(moveX));
     $("#"+id).css("top",parseFloat(dragDivY) + parseFloat(moveY));
    });
  }

  //结束拖动
  function dragEnd(id){

   //注销鼠标移动事件
   $("#"+id).unbind("mousemove");
   $("#"+id).bind("mouseout",function(){

     //注销鼠标按下事件
     $("#"+id).unbind("mousedown");
    });
  }
</SCRIPT>

二、接着是javascript（这个非原创）

<!-- 层的拖拽功能 -->
<script type="text/javascript">

function beginDrag(id,event)
{
  elementToDrag = document.getElementById(id);
    //该元素当前位于何处
    //该元素的样式性质必须具有left和top css属性
    //此外，我们假定他们用象素做单位
    //var x=parseInt(elementToDrag.style.left);
    //var y=parseInt(elementToDrag.style.top);
 
  //计算一个点和鼠标点击之间的距离，下面的嵌套的moveHandler函数需要这些值
    var deltaX=event.clientX-parseInt(elementToDrag.style.left);
    var deltaY=event.clientY-parseInt(elementToDrag.style.top);
 
  //注册mousedown事件后发生的mousemove和mouseup事件的处理程序
  //注意，它们被注册为文档的捕捉事件处理程序
  //在鼠标按钮保持按下的状态的时候，这些事件处理程序保持活动的状态
  //在按钮被释放的时候