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

最新推荐文章于 2021-06-20 23:10:43 发布

q410055954

最新推荐文章于 2021-06-20 23:10:43 发布

阅读量2.9k

点赞数 1

分类专栏： Jsp js jquery 技术交流 html 文章标签： jQuery HTML js 拖拽浏览器

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

版权

Jsp 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

html

7 篇文章 0 订阅

订阅专栏

最近发现web网页的拖拽效果，个人觉得是一种不错的用户体验，抽空研究了一下，原理还蛮简单的，下面贴一下我写的一个简单拖拽jquery自定义函数。

jquery代码:fun.js

 jQuery.fn.myDrag=function(){
	 _IsMove = 0;
     _MouseLeft = 0;
     _MouseTop = 0;
     return  $(this).bind("mousemove",function(e){
         if(_IsMove==1){
            $(this).offset({top:e.pageY-_MouseLeft,left:e.pageX-_MouseTop});
         }
	  }).bind("mousedown",function(e){
	      _IsMove=1;
	      var offset =$(this).offset();
	      _MouseLeft = e.pageX - offset.left;
	      _MouseTop = e.pageY - offset.top;
	  }).bind("mouseup",function(){
	      _IsMove=0;
	  }).bind("mouseout",function(){
	      _IsMove=0;
	  });
 }

html代码：

<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;  
        }
    </style>    
    <script type="text/javascript">
        $(function(){
                 $("#myDiv").myDrag();
                 $("#myDiv2").myDrag();
            })
    </script>

  </head>
  
  <body>
       <div id="myDiv" class="myDiv">拖拽1</div>
       
       <div id="myDiv2" class="myDiv">拖拽2</div>
  </body>
</html>

效果图1:

效果图2:

q410055954

关注

1
点赞
踩
0

收藏

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

最近发现web网页的拖拽效果，个人觉得是一种不错的用户体验，抽空研究了一下，原理还蛮简单的，下面贴一下我写的一个简单拖拽jquery自定义函数。 jquery代码:fun.js jQuery.fn.myDrag=function(){ _IsMove = 0; _MouseLeft = 0; _MouseTop = 0; return
复制链接

扫一扫

专栏目录