Dzwebs.Net

撰写电脑技术杂文十余年

jquery实现DIV拖动的效果

Admin | 2015-7-1 9:00:37 | 被阅次数 | 4111

温馨提示!

如果未能解决您的问题,请点击搜索;登陆可复制文章,点击登陆

  使用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>


该杂文来自: 网页制作杂文

上一篇:在JQuery中使用html(),text(),val()的用法

下一篇:jQuery所有的事件函数方法名

网站备案号:

网站备案号:滇ICP备11001339号-7

版权属性:

Copyright 2007-2021-forever Inc. all Rights Reserved.

联系方式:

Email:dzwebs@126.com QQ:83539231 访问统计