原生拖拽太拉跨了，纯JS自己手写一个拖拽效果，纵享丝滑

前言

提到元素拖拽，通常都会先想到用 HTML5 的拖拽放置 (Drag 和 Drop) 来实现，它提供了一套完整的事件机制，看起来似乎是首选的解决方案，但实际却不是那么美好，主要是它的样式太过简陋，无法实现更高级的用户体验：

其实这是浏览器默认的一种拖拽效果，随便拖拽任意的图片都会产生(包括文字)：

笔者因为之前有个小项目需要经常参考稿定设计，一直有留意其元素拖拽的效果(如下图)，所以接下来我将以这种效果为蓝本，使用原生 JS 实现一个富有动感的 自定义拖拽 效果，话不多说直接开摸。

实现原理

首先说下思路，我们需要知道鼠标的三个事件，分别是 mousedown，mousemove，mouseup ，当点击按下的时候，克隆一个绝对定位的元素，并标识下"拖拽中"的状态，接着在 mousemove 中就可以判断应该执行的具体方法，从而让元素随着鼠标移动起来。

在监听事件的 event 对象中，有几个参数是比较重要的：clientX，clientY 标识的鼠标当前横坐标和纵坐标，offsetX 和 offsetY 表示相对偏移量，可以在 mousedown 鼠标按下时记录初始坐标，在 mouseup 鼠标抬起时判断是否在目标区域中，如果是则用鼠标获取到的当前的偏移量 - 初始坐标得到元素实际在目标区域中的位置。

基础界面

先简单实现一个两栏布局界面，并应用上一些 CSS 效果:

<div id="app"><div class="slide"><div id="list"><img class="item" src="......." /><img.........</div></div><div class="content"></div>
</div> 

#app {width: 100vw;height: 100vh;display: flex;
}
.active {cursor: grabbing;
}

.slide {width: 260px;height: 100%;overflow: scroll;border-right: 1px solid rgba(0,0,0,.15);#list {user-select: none;.item {background: rgba(0,0,0,.15);width: 120px;display: inline-block;break-inside: avoid;margin-bottom: 4px;}.item:hover {cursor: grab;filter: brightness(90%);}.item:active {cursor: grabbing;}}.grid {column-count: 2;column-gap: 0px;}
}
.slide::-webkit-scrollbar {di