JS简易拖拽效果

最新推荐文章于 2019-10-13 17:49:40 发布
最新推荐文章于 2019-10-13 17:49:40 发布
阅读量100 收藏
点赞数
原文链接：http://www.cnblogs.com/wsir/p/5855832.html
版权

原理：注册mousemove事件，使元素跟随鼠标挪动；注册mouseup事件，移除mousemove事件，使得松开鼠标时元素不再跟随移动，能够固定在指定位置。在mousedown事件中注册mousemove事件和mouseup事件，这样便可完成一次完整的拖拽。 

重点：IE中setCapture()的应用。它的作用是捕捉所有的MouseEvent，设置完成后，即使鼠标移出窗口注册的鼠标事件仍然能够被触发。它在此处的作用是当鼠标移动过快越出元素的边界使得原本将要失效的mousemove事件依然能够发挥作用。在ff和chrome中，由于没有对应的设置，可以把mousemove和mouseup事件指定到docuemnt对象上，这样不管鼠标怎么移动，都在document上；其实在ie上这么写也行，那就不用设置setCapture()了，它和设置了的相比唯一的区别是当元素向右移出窗口边界时，元素始终保持在可视范围内。 

Js代码   收藏代码
    1. <!docType html>  
    2. <html>  
    3. <head>  
    4. <style type="text/css">  
    5. #drag {border:1px solid blue;width:100px;height:100px;position:absolute;}  
    6. </style>  
    7. </head>  
    8. <body>  
    9. <input id="x"  />  
    10. <input id="y"  />  
    11. <div id="drag"></div>  
    12.   
    13. <script><!--  
    14. var drag = document.getElementById('drag');  
    15. var inputX = document.getElementById('x');  
    16. var inputY = document.getElementById('y');  
    17. if(document.attachEvent){  
    18. drag.attachEvent('onmousedown',dragHandle);  
    19. }else{  
    20. drag.addEventListener('mousedown', dragHandle,false);  
    21. }  
    22. function dragHandle(event){  
    23.     var event = event||window.event;  
    24.     var startX = drag.offsetLeft;  
    25.     var startY = drag.offsetTop;  
    26.     var mouseX = event.clientX;  
    27.     var mouseY = event.clientY;  
    28.     var deltaX = mouseX - startX;  
    29.     var deltaY = mouseY - startY;  
    30.     if(document.attachEvent){  
    31.         drag.attachEvent('onmousemove',moveHandle);  
    32.         drag.attachEvent('onmouseup',upHandle);  
    33.         drag.attachEvent('onlosecapture',upHandle);  
    34.         drag.setCapture();  
    35.     }else{  
    36.         document.addEventListener('mousemove',moveHandle,true);  
    37.         document.addEventListener('mouseup',upHandle,true);  
    38.     }  
    39.     function moveHandle(event){  
    40.         var event = event||window.event;  
    41.         drag.style.left = (event.clientX - deltaX)+"px";  
    42.         drag.style.top = (event.clientY - deltaY)+"px";  
    43.         inputX.value=drag.style.left;  
    44.         inputY.value=drag.style.top;  
    45.     }  
    46.     function upHandle(){  
    47.         if(document.attachEvent){  
    48.             drag.detachEvent('onmousemove',moveHandle);  
    49.             drag.detachEvent('onmouseup',upHandle);  
    50.             drag.detachEvent('onlosecapture',upHandle);  
    51.             drag.releaseCapture();  
    52.         }else{  
    53.             document.removeEventListener('mousemove',moveHandle,true);  
    54.             document.removeEventListener('mouseup',upHandle,true);  
    55.         }  
    56.     }  
    57.   
    58. }  
    59. //--</script>  
    60. </body>  
    61. </html>  

转载于:https://www.cnblogs.com/wsir/p/5855832.html

baitao1932
关注
原生JS实现7中简单效果
weixin_49592687的博客
04-23 2794
1. 轮播图 描述: 每隔固定事件会自动换图 点击向左键或者向右键后转到相应的图片上 点击下面原点会转到相应图片 效果图: 代码: HTML <div id="box"> <ul class="list"> <li><img src="./img/1.jpg" alt=""></li> <li><img src="./img/2.jpg" alt=
JS实现简易的图片拖拽排序实例代码
12-11
**JS实现简易的图片拖拽排序实例代码** 在本文中，我们将探讨如何使用JavaScript和HTML5的拖放API实现一个简单的图片拖拽排序功能。首先，让我们深入理解HTML5拖放API的基础知识。 ### HTML5拖放API简介 拖放API...
js完美拖拽效果【原创】
前端小记
08-13 1617
js完美拖拽效果，兼容各大浏览器！ setCapture：事件捕获，IE下兼容；在IE下，事件对象为拖拽元素本身（div），标准下事件对象为document，注意在IE下事件捕获之后要释放事件捕获！ 完美拖拽 #div1{ width:150px; height:90px; background:#ccc; position:absolute; left:0; top
js实现同页面简易聊天框效果
chenzhuozhu的博客
07-01 6992
如图为最后成品效果，下图为输入效果同时实现了在输入框中使用回车可以打印的效果具体js代码如下图let otext=document.getElementsByClassName("textInput");        //找到两个输入文本框 let contBar=document.getElementsByClassName("contentBar");       //找到两个输出文本框 l...
实现元素点击跳转长按拖拽
木缘的博客
07-20 546
需求：用JS实现元素的点击跳转和长按拖拽效果 思路：用onmousedown和onmouseup事件的时间差来判断是点击还是拖拽，时间差<300毫秒认为是点击 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vi...
js实现移动端长按功能
qq_28193155的博客
05-13 7529
最近在复查前辈的代码时，发现很多需要长按实现某种功能的地方都是用 onclick 替代的，原以为长按也是点击的一种形式，在做过数次测试后，那脸打得 pia、pia、pia，便有了自己封装一个长按功能的想法。 社会我猪哥，人不狠话也不多。说干就干! 思路分析 移动端的点击功能（PC端也一样），分为手指按下（touchstart）和抬起（touchend），间隔短；而长按功能的“长”字，便可以在“间隔...
js实现简易拖拽的示例
01-18
简易拖拽 目录 代码实例 代码解析 scrollWidth,clientWidth,offsetWidth的区别 offsetX,clientX,pageX的辨析 下载源码链接  代码实例 <div id=box xss=removed></div> (function () { var dragging = false ...
js实现简易垂直滚动条
10-20
为了实现一个平滑的滚动效果，我们可能还需要使用一些JavaScript的定时函数，例如`setTimeout`或`requestAnimationFrame`，来处理拖拽结束后的惯性滚动效果。这会让用户体验更加流畅和自然。 最后，虽然本文未提供...
js简易版购物车功能
10-19
标题《js简易版购物车功能》和描述表明，本文旨在分享如何利用JavaScript创建一个简易的购物车功能。该功能主要基于HTML和JavaScript实现，利用了HTML的拖拽API以及DOM操作方法来完成购物车中商品的添加、数量统计和...
html+css+js 简易展开收起效果
热门推荐
zhengxue_er
09-29 1万+
用html+css+js做一个简易的文本展开收起效果。如图： （部分结构标签可能不是最佳选择，此次仅以实现展开收起效果为例子） 以HBuilder编辑器选项卡中“查找”选项为例。设定“查找”为链接，点击链接实现标签的展开收起效果。1.html部分①.首先确定该选项的构成：一个显示标签和一组隐藏选项。html的整体结构框架为：<div id="showdiv"> <a i
简单js效果整理
沐吾
03-06 910
逐字输出效果   window.onload=function(){    // 必须等待网页中所有的内容加载完毕后 ( 包括图片 ) 才能执行 必须等待网页中所有的内容加载完毕后 ( 包括图片 ) 才能执行 所有内容加载完毕后执行   var content=document.getElementById("content");   //获取id定义   var s
js基础入门的一些简单效果
WHY_222的博客
03-06 1115
一。当鼠标浮上时有提示：效果原理是:鼠标移上display为block,鼠标移走display为none;用js事件当......的时候：onmouseover,onmouseoutalert的使用获取元素：1.id;2.doucument.getElementById&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;  &lt;meta...
JS实现的一些简单的效果
fairy_lyh3259900的博客
10-13 2192
通过JS编写灯泡特效! 图片: 主要的代码段： 都是一些简单的代码
写一个Java挂机小游戏，测试华为互联网平台的功能。.zip
最新发布
11-05
本资源为Java挂机小游戏项目源码，旨在帮助初学者学习编程并测试华为互联网平台功能。通过编写和运行这个小游戏，用户可以掌握Java基础语法、面向对象编程、事件处理等基本概念，同时了解如何与华为云服务进行集成。项目包含详细的代码结构和注释，适合作为课程设计或毕业设计的参考材料，也可作为初学者的练手项目。请注意，该资源仅供学习使用，不得用于商业用途。
#-ssm-044-mysql-融资租赁管理系统-.zip
11-05
核心技术：SSM、mysql 一、用户管理模块：1.新增用户，2.删除用户，3.修改用户，4.查询用户。 二、租赁管理模块：1.租赁物管理，2.合同管理。 三、出租管理模块：1.租金管理，2.出租时间管理。 四、设置任务类型模块管理，类型包括：会议类型、约会类型、电话类型、纪念日类型、课程类型、其他类型。功能包括：1.类型的新增，2.类型的修改。 五、关于模块：本界面是介绍本系统的一些基本信息。包括此软件的制作者，制作时间等基本信息。
电子商务之价格优化算法：粒子群优化案例研究.docx
11-05
电子商务之价格优化算法：粒子群优化案例研究.docx
annoy-1.17.0-cp38-cp38-win32.whl.rar
11-05
python whl离线安装包 pip安装失败可以尝试使用whl离线安装包安装 第一步 下载whl文件，注意需要与python版本配套 python版本号、32位64位、arm或amd64均有区别 第二步 使用pip install XXXXX.whl 命令安装，如果whl路径不在cmd窗口当前目录下，需要带上路径 WHL文件是以Wheel格式保存的Python安装包， Wheel是Python发行版的标准内置包格式。 在本质上是一个压缩包，WHL文件中包含了Python安装的py文件和元数据，以及经过编译的pyd文件， 这样就使得它可以在不具备编译环境的条件下，安装适合自己python版本的库文件。 如果要查看WHL文件的内容，可以把.whl后缀名改成.zip，使用解压软件（如WinRAR、WinZIP）解压打开即可查看。 为什么会用到whl文件来安装python库文件呢？ 在python的使用过程中，我们免不了要经常通过pip来安装自己所需要的包， 大部分的包基本都能正常安装，但是总会遇到有那么一些包因为各种各样的问题导致安装不了的。 这时我们就可以通过尝试去Python安装包大全中（whl包下载）下载whl包来安装解决问题。
Toad Data Modeler：Toad数据模型器基础操作.docx
11-05
Toad Data Modeler：Toad数据模型器基础操作.docx
课设毕设基于SpringBoot+Vue的南皮站化验室源码可运行.zip
11-05
本压缩包资源说明，你现在往下拉可以看到压缩包内容目录 我是批量上传的基于SpringBoot+Vue的项目，所以描述都一样；有源码有数据库脚本，系统都是测试过可运行的，看文件名即可区分项目~ ｜Java｜SpringBoot｜Vue｜前后端分离｜ 开发语言：Java 框架：SpringBoot，Vue JDK版本：JDK1.8 数据库：MySQL 5.7+（推荐5.7，8.0也可以） 数据库工具：Navicat 开发软件： idea/eclipse（推荐idea） Maven包：Maven3.3.9+ 系统环境：Windows/Mac
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值