手写原生代码专题 | 图片拖拽效果（一）

最新推荐文章于 2022-05-19 13:01:36 发布

前端达人

最新推荐文章于 2022-05-19 13:01:36 发布

阅读量552

点赞数

文章标签： css html js java javascript

本文链接：https://blog.csdn.net/Ed7zgeE9X/article/details/117408150

版权

本文通过原生代码实现图片拖拽效果，详细介绍了拖拽相关API事件，包括dragstart、drag、dragend、dragenter、dragover、dragleave和drop。通过创建HTML、CSS和JS文件，演示了如何设置元素的可拖动属性，定义拖动过程中的样式变化，以及监听拖放事件来完成拖拽功能。

摘要由CSDN通过智能技术生成

一、系列介绍

前端的小伙伴们，我想大多数都是颜值控吧，看到一个漂亮或新奇的效果，都想搞明白是怎么实现的吧。但是前端发展的实在太快，各种框架和组件五花八门，由于项目业务时间的问题，我们都习惯了使用各种框架和组件去实现，以至于离开这些东西，我们有可能连个最基础的动效都不清楚怎么实现，这就是我想写这个系列文章的原因，除了这个原因，也是方便小编自己总结和梳理，日后用到时方便查阅。总之练习这些基础的项目并不low，放低姿态，从最基础的原生代码开始复习实践，帮助我们梳理基础知识，日积月累，一定会有不少收获。

本系列文章小编将和大家一起从最基础的原生代码实践，做一些小的项目，从最基础的实践中复习和掌握前端的一些基础知识，只有熟练了才能理解前端的本质，学习前端新的知识和框架时就能更快的上手。本专题文章会用到 ES6、css3的特性来实践目前比主流的交互特效。

二、图片拖拽效果介绍

本篇文章，如下视频所示，界面有5个方格拖放区域，我们可以在这些区域里拖拽图片，当鼠标拖动图片时，图片周围有灰色的粗边框效果提示用户当前元素可拖动，在可放置图片的目标方格会出现白色的虚线边框并且背景色更改为黑色，提示用户可以在此位置放置被拖动的图片，结束拖动时（松开鼠标时），图片将会放置在目标方格内。