Javascript实现拖拽效果

我们执行拖拽操作时，

1.按住某元素

2.移动鼠标

3.移动鼠标到相应位置后松开鼠标

基于以上操作，页面拖拽效果需要三个事件

onmousedown
onmousemove
onmouseup

在onmousedown事件中，我们需要定义函数表明，该元素被按住，即将进行移动操作，需要计算x坐标值，并触发后续的onmousemove事件。

在onmousemove事件中，我们需要计算元素坐标位置，根据鼠标移动改变元素位置，准备执行鼠标松开时的事件函数。

在onmouseup事件中，我们需要以最终鼠标确定的位置为元素的最终位置，并且终止onmousemove事件。

注意：常规流元素不能够自由移动位置，设置定位后可以通过left,top等属性移动位置。

位置计算需要clientX,clientY,offsetX,offsetY等事件相关属性。

如果将left的值直接设置为event.clientX的话，鼠标位置在哪里，元素的最左侧就会跟着鼠标在哪里。这样的话，鼠标位置永远都是元素左侧。在按下鼠标时计算鼠标与元素位置的差值，然后在后续onmousemove处理中把这个差值加上，就可以使鼠标位置达到元素内部，并且在移动过程中不会改变。

代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#di{width:100px;height:100px;background-color: #4c4c4c;position: relative;/*设置绝对定位或者相对定位是必要的*/}</style><script>//window.onload=function(){}这里是为了使html页面加载完毕后再加载js代码，//否则获取元素步骤发生在元素产生之前，元素获取会失败window.onload=function(){//获取元素var d2=document.getElementById("d2");//以下为函数主体部分di.onmousedown=function(){//这里解释：event.clientX是鼠标位置相对于浏览器窗口左上角的差距像素值//offsetLeft是事件元素相对于浏览器窗口的定位位置,如果被某个定位元素包含，left会相对于那个定位元素，而不是document页面var disx=event.clientX-di.offsetLeft;var disy=event.clientY-di.offsetTop;//以下内容看不懂可以直接注释掉正常实现方式，使用发生跳跃的实现方式，然后就会发现//这里在按下鼠标时记录鼠标位置相对于元素的位置的差,防止每次开始拖拽时鼠标位置突然变成元素的一边。//这里设置left值为event.clientX,就可以看到不协调的元素跳跃，下面通过注释代码可以直接看到效果document.onmousemove=function(){di.style.left=event.clientX-disx+"px";//这里是正常表现效果的实现方式// di.style.left=event.clientX+"px";//这里是发生跳跃的不恰当的实现方式di.style.top=event.clientY-disy+"px";};document.onmouseup=function(){document.onmousemove=null;//这里把移动元素的状态去掉，停止拖拽。}}}</script>
</head>
<body><div id="di"></div>
</body>
</html>

Javascript实现拖拽效果相关推荐

javascript简单拖拽效果
clientX,Y,鼠标的位置 document.documentElement.clientWidth:获取可视区域的宽度 document.documentElement.clientHeight ...
html js点击字图片下拉,JavaScript实现文字与图片拖拽效果的方法
本文实例讲述了JavaScript实现文字与图片拖拽效果的方法.分享给大家供大家参考.具体实现方法如下: JavaScript实现文字与图片的拖拽效果 *{padding:0;margin:0;} . ...
JavaScript实现鼠标拖拽效果
JavaScript实现鼠标拖拽效果前几篇博客一直在讲鼠标的移动事件相关的效果,今天再来讲一讲如何利用鼠标事件实现拖拽div块移动的效果.效果如图: HTML代码: <div id=" ...
怎么用javascript进行拖拽(转摘)
本文译自:http://www.webreference.com/programming/javascript/mk/column2/index.html 所有版权归原文所有由sohotx.com雪 ...
盒子拖拽效果，原生js实现
原生js实现拖拽效果 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm 这篇文章主要介绍了JS实现漂亮的窗口拖拽 ...
DOM 案例——(美团外卖下拉框菜单、半透明——信息滑入、模态窗口拖拽效果、放大镜效果、滚动条滑到一定位置的固定导航栏、12306购票网站多级联动、斗鱼TV无规则弹幕特效、百度搜索条动态输入下拉瀑布)
目录 1.缓动动画--美团外卖下拉框菜单 2.半透明--信息滑入 3.模态窗口拖拽效果 4.放大镜效果 5.滚动条滑到一定位置的固定导航栏 6.12306购票网站多级联动 7.斗鱼TV无规则弹幕特效 ...
【加强版】js原生实现拖拽效果，这次没有用document的mousedown、mousemove、mouseup事件我们来点实际的（但是有个弊端：拖拽过程中鼠标会变成一个禁用符号，不太友好）
<div class='dragged'></div> //初始化需要拖拽的列initDrags() {var arr = document.querySelectorAll( ...
【墙裂推荐】【原生基础版】js原生实现拖拽效果，注意不要忘了div的cursor用grab和grabbing 还是古法炮制、传统工艺的原生代码兼容性最好，推荐
以下方式的劣势就是在放弃拖拽那一刻会触发click事件,通常如果被拖拽元素还有其他点击事件,会重复触发,往往并非业务需求.优势就是-额-貌似这段代码没什么屌优势! <div class='dra ...

Javascript实现拖拽效果

Javascript实现拖拽效果相关推荐

最新文章

热门文章