js实现鼠标的拖拽效果
2021-05-15 16:29
标签：释放 element css fun 例子 1.2 一个 页面 获取 拖拽是一个非常实用的页面效果 1.拖拽的一些应用场景： 1.1. 浏览器标签顺序的切换 1.2. 页面上小组件的拖拽 1.3. 弹出层的拖拽 2 .基本原理 2.1 拖拽的基本原理是： 鼠标在元素上按下的时候，获取鼠标在页面上的位置，计算鼠标相对元素的定位：disX，disY； 鼠标移动的时候，元素跟着鼠标移动，但鼠标相对于元素是不动的，因此，可以根据disX，disY计算元素的位置； 鼠标松开的时候，元素停止移动； 最重要的一点是：需要拖动的那个元素position要设置成absolute或relative，这样才可以移动。 2.2 事件：上述前三个步骤对应三个事件 onmousedown：在用户按下了任意鼠标按钮时触发 onmousemove：当鼠标指针在元素内部移动时重复地触发 onmouseup：在用户释放鼠标按钮时触发 3. 举个例子 HTML代码： CSS代码： JS代码： 增加磁性吸附效果，js代码改为： js实现鼠标的拖拽效果 标签：释放 element css fun 例子 1.2 一个 页面 获取 原文地址：http://www.cnblogs.com/qm57bk/p/7751505.htmldiv id="box">div>
1 html,
2 body{
3 width: 100%;
4 height: 100%;
5 }
6 #box{
7 width: 100px;
8 height: 100px;
9 background-color: pink;
10 position: absolute;
11 }
1 var box = document.getElementById(‘box‘);
2 box.onmousedown = function(){
3 var event = event ? event : window.event;
4
5 //获取鼠标相对元素的位置
6 var disX = event.clientX - box.offsetLeft;
7 var disY = event.clientY - box.offsetTop;
8
9 //当鼠标移动的时候，获取元素的位置
10 document.onmousemove = function(){
11 var event = event ? event : window.event;
12 var iL = event.clientX - disX;
13 var iT = event.clientY - disY;
14 box.style.left = iL +‘px‘;
15 box.style.top = iT +‘px‘;
16 }
17
18 //当鼠标松开的是，元素随着鼠标停止
19 document.onmouseup = function(){
20 document.onmousemove = null;
21 document.onmouseup = null;
22 }
23
24 }
1 var box = document.getElementById(‘box‘);
2 box.onmousedown = function(){
3 var event = event ? event : window.event;
4
5 //获取鼠标相对元素的位置
6 var disX = event.clientX - box.offsetLeft;
7 var disY = event.clientY - box.offsetTop;
8
9 //当鼠标移动的时候，获取元素的位置
10 document.onmousemove = function(){
11 var event = event ? event : window.event;
12 var iL = event.clientX - disX;
13 var iT = event.clientY - disY;
14
15 //磁性吸附
16 if(iL){
17 iL = 0;
18 }else if(iL>=document.documentElement.offsetWidth - box.offsetWidth - 50){
19 iL = document.documentElement.offsetWidth- box.offsetWidth;
20 }
21 if(iT){
22 iT = 0;
23 }else if(iT>=document.documentElement.offsetHeight - box.offsetHeight - 50){
24 iT = document.documentElement.offsetHeight- box.offsetHeight;
25 }
26 box.style.left = iL +‘px‘;
27 box.style.top = iT +‘px‘;
28 }
29
30 //当鼠标松开的是，元素随着鼠标停止
31 document.onmouseup = function(){
32 document.onmousemove = null;
33 document.onmouseup = null;
34 }
35 }
上一篇：php安装扩展memcached