3 小时前发布原生JS快速实现拖放（drag and drop）效果

最新推荐文章于 2024-07-15 16:32:36 发布

暮　色

最新推荐文章于 2024-07-15 16:32:36 发布

阅读量412

点赞数

分类专栏：前端 JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/infotw/article/details/93368982

版权

本文介绍了如何使用原生JavaScript和CSS实现简单的拖放效果。通过设置HTML元素的class和draggable属性，结合CSS定义拖动过程中的样式变化，以及JavaScript监听拖放相关事件，实现元素的拖放操作。文章还强调了一些关键点，如拖动过程中元素状态的处理和事件监听的细节，鼓励读者亲自实践并提供了前端学习资源。

摘要由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为draggable，同时设置draggable属性为true，表示该元素可以被拖拽。2. 默认情况下，只有图片、链接还有被选中的文字能被拖拽，其他元素需要设置draggable为true才能被拖拽。所以为了凸显draggable的用法，这里使用而