纯JS(JavaScript)实现拖拽效果，兼容各大浏览器

蔚落 2022-06-06 06:36 172阅读 0赞

> 为了让每一个看了这篇博客的人都会拖拽效果，我会以最简单最有条理的为大家讲清楚。

#### 首先大致讲解一下拖拽的实现思路 ####

1.  确定拖拽对象，就是需要拖拽的元素，我们给它一个id或一个class作为唯一标识
2.  拖拽过程用到三个时间，鼠标按下事件，鼠标移动事件，鼠标抬起事件。

> 一定要养成先理清思路再具体实现的习惯，上面的思路列出来就感觉很简单了吧。

#### 第一步，确定拖拽对象，这里我写了一个div ####

<div id="div1">//给出唯一标识
    </div>

css简单设置一下样式：

* { margin: 0; padding: 0; }
    #div1 { position: absolute; width: 100px; height: 100px; cursor: move; background-color: red; }

#### 第二步，事件处理 ####

这里涉及到三个事件，我都说明一下，知道的就直接跳过吧

鼠标按下事件:
    onmousedown事件会在鼠标按键被按下时发生
    object.onmousedown=function(){ //object为获取的元素
        SomeJavaScriptCode//你要执行的代码
    };
    
    鼠标移动事件:
    onmousemove事件会在鼠标指针移到指定的对象时发生
    object.onmousemove=function(){ //object为获取的元素
        SomeJavaScriptCode//你要执行的代码
    };
    
    鼠标抬起事件:
    onmouseup 事件会在鼠标按键被松开时发生
    object.onmouseup=function(){ //object为获取的元素
        SomeJavaScriptCode//你要执行的代码
    };

三个事件用法都相同，知道了这几个事件就开始实现我们的功能吧

> 以上所有内容不依赖任何插件，纯HTML、css、js实现，复制即可使用，所有浏览器均兼容。欢迎评论留言。