大众计算机学习网欢迎诸位!收藏本站注 册登 陆
常用教程:基础知识网络知识操作系统WPS网页制作数据库算法网页成功之路网络安全最新技术古典mid流行midmid背景下载中心
您现在的位置:首页 > 教程 > 文章页

jquery实现DIV拖动的效果

Admin | 2015-7-1 9:00:37 | ReadNums | 1078 | 标签 网页制作 | 打印本页
     

  使用jquery实现DIV的拖动,不是件难事,只要注意些细节部分即可,下面教大家如何实现这种效果。

  一、代码部分

  $(document).ready(function(){
   $("#ExamInforDiv").click(function (){
      DragMe(this);
    })
    function DragMe(obj)
    {
      var GetDivID=obj.id;
      $("#"+GetDivID).mousedown(function(e)//e鼠标事件 
      { 
        $(this).css("cursor","move");//改变鼠标指针的形状        
        var offset = $(this).offset();//DIV在页面的位置 
        var x = e.pageX - offset.left;//获得鼠标指针离DIV元素左边界的距离 
        var y = e.pageY - offset.top;//获得鼠标指针离DIV元素上边界的距离 
        $(document).bind("mousemove",function(ev)//绑定鼠标的移动事件,因为光标在DIV元素外面也要有效果,所以要用doucment的事件,而不用DIV元素的事件 
        { 
          $("#"+GetDivID).stop();//加上这个之后           
          var _x = ev.pageX - x;//获得X轴方向移动的值 
          var _y = ev.pageY - y;//获得Y轴方向移动的值             
          $("#"+GetDivID).animate({left:_x+"px",top:_y+"px"},2); 
          });         
      });        
      $(document).mouseup(function() 
      { 
        $(this).unbind("mousemove"); 
      })  
    }      
  }) 

  注意上面的代码哦,其中的:

  $("#ExamInforDiv").click(function (){
      DragMe(this);
    })

  "#ExamInforDiv这个是指实现拖动功能的div的ID号,此处可以实现很多个div的拖动效果,比如,要实现另外一个div也能拖动的话,那么就再加事件及函数即可,比如,再加下面的代码

  $("#另外一个Div的ID").click(function (){
      DragMe(this);
    })

  这样就可以了,是不是相当灵活?那当然。

  二、HTML中的div对象

  <div id="ExamInforDiv" title="将试卷导入Word并下载">
  先双击这个div,然后就能拖动了。
  </div>


问题未解决:在线咨询我要在线咨询问题

网友评论

(访客)
内容实用原创,讲得很好。
20xx年x月x日
(站长)
有问题请在线咨询。
20xx年x月x日