js进阶 12-17 jquery实现鼠标左键按下拖拽功能

一、总结

一句话总结：监听的对象必须是文档，鼠标按下运行mousemove事件，鼠标松开取消mousemove事件的绑定，div的偏移的话是pageX和pageY。

1、为什么直接给div加mousemove不行？

因为这样必须选中div才能移动，而且移动的快了鼠标就脱离div了，就移不动了

19                 $(document).mousemove(function(e){

20                     $('#div1').offset({

21                         left:e.pageX,

22                         top:e.pageY

23                     })

24                 })

2、要想实现全局拖动需要监听的事件对象是谁？

document

19                 $(document).mousemove(function(e){

20                     $('#div1').offset({

21                         left:e.pageX,

22                         top:e.pageY

23                     })

24                 })

3、事件拖动的话div的位置坐标应该是什么？

pageX和pageY

20                     $('#div1').offset({

21                         left:e.pageX,

22                         top:e.pageY

23                     })

4、如何实现鼠标左键点击的时候才触发拖动效果？

给document添加mousedown事件

18             $(document).mousedown(function(){

19                 $(document).mousemove(function(e){

20                     $('#div1').offset({

21                         left:e.pageX,

22                         top:e.pageY

23                     })

24                 })

5、只添加mousedown事件或鼠标点击的确是跟着动，鼠标松开也还是跟着动，我们如何解决这个问题？

再添加mouseup事件解决鼠标的松开的div还跟着动的问题

16     <script>

17         $(function(){

18             $(document).mousedown(function(){

19                 $(document).mousemove(function(e){

20                     $('#div1').offset({

21                         left:e.pageX,

22                         top:e.pageY

23                     })

24                 })

25                 $(document).mouseup(function(){

26                     $(document).off('mousemove')

27                 })

28             })

29

30         })

31     </script>

二、jquery实现拖拽功能

1、相关知识

拖拽功能

案例描述：实现一个简单的拖拽元素的功能.

案例重点：该案例本身非常简单，但是综合运用了键盘事件和事件对象。

2、代码

 <!DOCTYPE html>

 <html lang="en">

 <style>

 </style>

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

     <style type="text/css">

         div{width: 100px;height: 100px;border-radius: 50px;background: orange;position: absolute;}

     </style>

 </style>

 </head>

 <body>

     <div id="div1"></div>

     <script>

         $(function(){

             $(document).mousedown(function(){

                 $(document).mousemove(function(e){

                     $('#div1').offset({

                         left:e.pageX,

                         top:e.pageY

                     })

                 })

                 $(document).mouseup(function(){

                     $(document).off('mousemove')

                 })

             })

         })

     </script>

 </body>

 </html>
 

js进阶 12-17 jquery实现鼠标左键按下拖拽功能的更多相关文章

  1. 2018-2-13-win10-uwp-获取按钮鼠标左键按下

    title author date CreateTime categories win10 uwp 获取按钮鼠标左键按下 lindexi 2018-2-13 17:23:3 +0800 2018-2- ...

  2. win10 uwp 获取按钮鼠标左键按下

    我们可以使用PointerPressed获得鼠标右键按下,但是我们如何获得左键? 其实UWP已经没有MouseLeftButtonDown,于是我们可以使用一个简单方法去获取鼠标左键按下. 我们在xa ...

  3. 在Window工作区按下鼠标左键拖动窗体

    Window.DragMove(): 允许使用在窗口工作区的暴露区域上方按下其鼠标左键的鼠标来拖动窗口.(窗口工作区:除去窗体的title.bottom后的剩余部分空间) 使用该方法时注意:一定要在鼠 ...

  4. js进阶 12 jquery事件汇总

    js进阶 12 jquery事件汇总 一.常用事件 页面载入事件 ready() 文档就绪事件(当 HTML 文档就绪可用时) 鼠标事件 click() 触发.或将函数绑定到指定元素的 click 事 ...

  5. js 鼠标左键拖动滚动

    鼠标左键拖动滚动 原作者: http://blog.csdn.net/lisatisfy/article/details/6606026 本文在源代码的基础上 增加支持水平滚动 的功能 html &l ...

  6. js进阶 13-9/10 jquery如何实现三级列表

    js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...

  7. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  8. js进阶---12-12、jquery事件委托怎么使用

    js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...

  9. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

随机推荐

  1. POJ 3592 Instantaneous Transference（强连通+DP）

    POJ 3592 Instantaneous Transference 题目链接 题意:一个图.能往右和下走,然后有*能够传送到一个位置.'#'不能走.走过一个点能够获得该点上面的数字值,问最大能获得 ...

  2. VS添加程序集

    项目->添加->引用->程序集 可在项目的引用目录中,查看引用的程序集

  3. 适合ASP.NET Web API使用的场景

    富客户端web应用程序:ASP.NET Web API适合大量使用AJAX调用的富客户端应用程序,如Silverlight应用程序,基于Adobe Flash的应用程序或单页应用程序(SPA)等. 本 ...

  4. Java(标识符，关键字，注释，常量，变量)

    标识符 在java程序中有些名字是可以自定义的,那么这些自定义的名字我们就称作为自定义的标识符. 标识符要注意的细节: 标识符的组成元素是由字母(a-zA-Z).数字(0-9).下划线(_).美元符号 ...

  5. unalias---取消命令别名

    unalias命令用来取消命令别名,是为shell内建命令. 选项 -a:取消所有命令别名. 实例 使用unalias命令将已经设置的命令别名"cc"取消,输入如下命令: unal ...

  6. 【MongoDB】mongodump and mongorestore of mogodb

    The another tool will be mentioned in this blog, namely mongodump and mongorestore. General speaking ...

  7. 摆脱技术思维，转向产品思维——寻找“万能”IDC的苦恼

    背景:近期在新产品的开发任务完毕后一直在为寻找好的IDC和优质的托管服务忙碌.需求源自于我们重点要解决之前老版产品面临的国内外用户訪问速度慢甚至连接不上的问题. 除去架构技术上使用高性能.可扩展的方案 ...

  8. Oracle 11gR2光钎链路切换crs服务发生crash

    Oracle 11gR2光钎链路切换crs服务发生crash 背景: 我们将Oracle 11gR2(11.2.0.4)在RedHat EnterPrise 5.8上通过RDAC完毕的多路径链路冗余. ...

  9. RelativeLayout-属性大全

    // 相对于给定ID控件 <!--将该控件的底部置于给定ID的控件之上--> android:layout_above <!--将该控件的底部置于给定ID的控件之下--> an ...

  10. Android开发经验之点击图片判断是否在图片范围之内

    package xiaosi.grivaty; import android.content.Context; import android.graphics.Bitmap; import andro ...