Web组件流畅拖动效果

时间 2019-12-10

标签 web 组件流畅拖动效果栏目 HTML 繁體版

原文原文链接

　　拖动效果，能够形象的帮助用户处理一些问题，好比Windows删除文件，只需将文件拖动至回收站便可。比起右键显得更形象，我以为更好玩一点^_^。固然，在其余许多方面，其实也有用到拖动效果，只是他们不是那么明显，以致于咱们不容易觉察到。我是自娱自乐，写一个Web MusicPlayer的时候开始对拖动有所构思，由于须要作个左右必定范围内拖动的按钮，来改变Music文件的播放进度。javascript

　　很少说了，下面咱们来进入本篇的正题。css

　　须要的组件：咱们先来理一下简化后的拖动模型，只须要一个简单的于body中一个普通的div。他的大小应该适中，这样在看其相对鼠标运动时更加清晰。html

　　拖动触发的事件：1.mousedown　　2.mousemove　　3.mouseupjava

　　拖动过程：鼠标左键在div上单击触发mousedown事件，在mousedown事件以后，鼠标开始拖动动做，触发mousemove事件，注意，此时div应该跟随鼠标在body上移动。这就牵扯到拖动的组件div的left（左支撑），以及top（上支撑）的该变量。（固然也能够用right和bottom来反映，效果同样）。要获取鼠标移动状况，在mousedown事件（设为事件ed）以后，获取鼠标屏幕位置（ed.clientX，ed.clientY）;鼠标移动后mousemove事件（设为事件em）获取鼠标位置（em.clientX，em.clientY）;则鼠标移动在X，Y方向的份量也是div将要移动的份量为（em.clientX，em.clientY）-（ed.clientX，ed.clientY）=（em.clientX-ed.clientX,em.clientY-ed.clientY）;注意到得的值可能有负值状况，这种状况是不影响的。由于，若是咱们假设鼠标相对（ed.clientX，ed.clientY）向右下移动至（em.clientX，em.clientY），若其中出现负值，相应的加号接变成了减号，也就是移动方向为假设方向的反方向，有实际意义，并不影响效果。如今，开始移动咱们惟一的div，（在实际运行中，二者移动几乎是同步的，这里分开来讲，只是便于理解），由上文咱们知道div应该跟随鼠标向假设的方向右下移动（em.clientX-ed.clientX,em.clientY-ed.clientY）；要在js中获取组件div的left和top即初始位置（d.offsetLeft,d.offsetTop）(这里d=document.getElementById('div');),则只需在mousemove事件触发时，对div的left和top从新赋值便可跟随鼠标移动，因此移动后的div位置为（d.offsetLeft,d.offsetTop）+（em.clientX-ed.clientX,em.clientY-ed.clientY）=（d.offsetLeft+em.clientX-ed.clientX,d.offsetTop+em.clientY-ed.clientY）;这样，咱们整个移动的过程就完成。spa

　　可是若是全部的事件监听器所有放在待拖动div组件上，你会发现这个div很“脆弱”，慢慢拖动div中心彻底没事，可是，当点击div边缘拖动，或者拖动速度较快时，你会发现咱们的辛辛苦苦作出的div玩去了，跑丢了。Q~Q。这是由于当mousemove触发时，div跟随鼠标移动，并不是是彻底同步的，他们之间是有很小的延时的。当咱们拖动速度很快的时候，鼠标跑出了div的“领域”，而咱们的mousedown是加在div上的，如今鼠标已经不在领域内，天然也就停下来了。鼠标和div分道扬镳。要避免这个问题，也就是当鼠标在div外移动时，div依然艰难的保持与鼠标同步运动。即，mousedown依然放在div上，而mousemove放在咱们的最大的容器body上，这样，当鼠标位于div外时，div依然追随咱们我行我素的鼠标。为了不当移速过快时忽然up鼠标左键状况（这时，咱们鼠标即便没有down左键，当鼠标进入div时，div依然追随鼠标），mouseup也应该加在最大的容器body上，至此，我行我素的鼠标和至死不渝的div曲折的故事圆满收尾。code

　　理清了思路下面就开始愉快的代码时间了。（为了粘贴方便，这里就不分开css，js了）htm

看一下效果http://dearvee.ccaeo.com/blog/move.htmlblog

2017-03-08 17:13:01事件

<!DOCTYPE html>
<html>
<head>
    <title>move</title>
</head>

<style type="text/css"> .body_css{ width: 100%; height: 100%; position: absolute;
    } .div_css{ width: 100px; height: 100px; background-color: #0ff; position: absolute; left: 0px; top: 0px; color: #fff; user-select:none;
    }
</style>
<script type="text/javascript"> window.onload=function (){ var d = document.getElementById('div'); var b = document.getElementById('body'); d.addEventListener("mousedown", function(ed) { var flag=true; var dl=d.offsetLeft; var dt=d.offsetTop; b.addEventListener("mousemove",function(em){ if(flag){ d.style.left=dl+em.clientX-ed.clientX+"px"; d.style.top=dt+em.clientY-ed.clientY+"px"; } }); b.addEventListener("mouseup",function(){ flag=false; }); }); } </script>
<body id="body" class="body_css">
<div id="div" class="div_css">你甩不掉个人<br>Q_Q</div>
</body>
</html>

1. elementUI Table组件实现拖拽效果
2. View的拖动效果-ViewDragHelper
3. 拖动图片效果
4. JS实现拖动效果
5. js实现拖动效果
6. draganddrop图片拖动效果
7. 拖拽效果
8. js拖入拖出效果
9. Android 拖动组件
10. Shape流动效果
更多相关文章...
• SVG 模糊效果 - SVG 教程
• ASP AdRotator 组件 - ASP 教程
• SpringBoot中properties文件不能自动提示解决方法
• IntelliJ IDEA中SpringBoot properties文件不能自动提示问题解决