原生JS快速实现拖放（drag and drop）效果

最新推荐文章于 2024-01-02 14:01:32 发布

sdallw

最新推荐文章于 2024-01-02 14:01:32 发布

阅读量704

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_65627447/article/details/127989753

版权

本文介绍了如何使用原生JavaScript和CSS快速实现拖放效果。通过设置HTML元素的`draggable`属性，配合CSS的过渡效果，以及监听拖放相关的JavaScript事件，可以创建出流畅的拖放交互。关键步骤包括设置`ondragstart`、`ondragenter`、`ondragover`、`ondragleave`和`ondrop`事件，以及在事件处理中调整元素的显示状态和位置。

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

拖放是很常见的一种交互效果，很多时候我们都会借助于第三方的控件来实现，其实用原生js实现起来也非常的方便。接下来我们就用原生js和css快速实现这样的拖放效果：

HTML

HTML的内容很简单，就是五个空的容器和一个可以被拖拽的元素：

html：

<body>
  <div class="droppable">
    <div class="draggable" draggable="true"></div>
  </div>
  <div class="droppable"></div>
  <div class="droppable"></div>
  <div class="droppable"></div>
  <div class="droppable"></div>
</body>

注意点：

1. 容器的的class为droppable，用于接收被拖拽的元素，可被拖拽的元素class为dr