jquery实现简单的拖拽效果,兼容所有浏览器(二)

最新推荐文章于 2024-06-05 10:04:13 发布

q410055954

最新推荐文章于 2024-06-05 10:04:13 发布

阅读量1.3k

点赞数

分类专栏： Jsp jquery html js 文章标签：浏览器 jQuery HTML js div

本文链接：https://blog.csdn.net/wenjin1204/article/details/9147223

版权

Jsp 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

html

7 篇文章 0 订阅

订阅专栏

相对于上一篇，优化了拖拽的效果。

js代码:fun.js

_MoveObj = null;//全部变量，用来表示当前div
z_index = 0;//z方向

jQuery.fn.myDrag=function(){  
	   _IsMove = 0;  //是否移动  1.移动
	   _MouseLeft = 0;  //div left坐标
	   _MouseTop = 0;  //div top坐标
	  $(document).bind("mousemove",function(e){  
	        if(_IsMove==1){  
	           $(_MoveObj).offset({top:e.pageY-_MouseLeft,left:e.pageX-_MouseTop});  
	        }  
	  }).bind("mouseup",function(){  
	      _IsMove=0;  
	      $(_MoveObj).removeClass("downMouse");
	  });
	  return $(this).bind("mousedown",function(e){  
	      _IsMove=1;
	      _MoveObj = this;
	      var offset =$(this).offset();  
	      _MouseLeft = e.pageX - offset.left;  
	      _MouseTop = e.pageY - offset.top; 
	      z_index++;
	      _MoveObj.style.zIndex=z_index; 
	      $(_MoveObj).addClass("downMouse");
	  });  
}

html代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>demo.htm</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="myFun.js" type="text/javascript"></script>
    <style type="text/css">
       .myDiv{
           background:#EAEAEA;
           width: 100px;
           height: 100px;
           border: 1px solid;
           cursor: pointer;  
           text-align: center;
           line-height: 100px;  
        }
      .downMouse{
          cursor:move;
          filter:alpha(Opacity=80);
          -moz-opacity:0.5;
          opacity: 0.5;
          background-color:#ffffff;
      }
    </style>    
    <script type="text/javascript">
        $(function(){
                 $(".myDiv").myDrag();
                 //$("#myDiv2").myDrag();
            })
    </script>

  </head>
  
  <body>
       <div id="myDiv1" class="myDiv">拖拽1</div>
       <div id="myDiv2" class="myDiv">拖拽2</div>
       <div id="myDiv3" class="myDiv">拖拽3</div>
       <div id="myDiv4" class="myDiv">拖拽4</div>
       <div id="myDiv5" class="myDiv">拖拽5</div>
       <div id="myDiv6" class="myDiv">拖拽6</div>
       <div id="show"></div>
  </body>
</html>

效果图1: 效果图2:

q410055954

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery实现简单的拖拽效果,兼容所有浏览器(二)

相对于上一篇，优化了拖拽的效果。 js代码:fun.js_MoveObj = null;//全部变量，用来表示当前divz_index = 0;//z方向jQuery.fn.myDrag=function(){ _IsMove = 0; //是否移动 1.移动 _MouseLeft = 0; //div left坐标 _MouseTo
复制链接

扫一扫

专栏目录