`
zhifeichuan
  • 浏览: 20451 次
  • 性别: Icon_minigender_1
  • 来自: 天津
文章分类
社区版块
存档分类
最新评论

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事件的处理程序
  //注意,它们被注册为文档的捕捉事件处理程序
  //在鼠标按钮保持按下的状态的时候,这些事件处理程序保持活动的状态
  //在按钮被释放的时候,它们被删除
    document.attachEvent("onmousemove",moveHandler);
    document.attachEvent("onmouseup",upHandler);
  
    //我们已经处理了该事件,不要让别的元素看到它
   event.cancelBubble=true;
   event.returnValue=false;
  
    function moveHandler(e)
    {
      //把元素移动到当前的鼠标位置
      e=window.event;
      elementToDrag.style.left=(event.clientX-deltaX)+"px";
      elementToDrag.style.top=(event.clientY-deltaY)+"px";
    
      //不要让别的元素看到该事件
      event.cancelBubble=true;
    }
   
    function upHandler(e)
    {
      //注销事件处理程序
       document.detachEvent("onmouseup",upHandler);
       document.detachEvent("onmousemove",moveHandler);}
  
       event.cancelBubble=true;
     }
 
</script>
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics