HTML5原生拖放事件的学习与实践

最新推荐文章于 2022-12-08 15:26:19 发布

心谭

最新推荐文章于 2022-12-08 15:26:19 发布

阅读量173

点赞数

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

本文链接：https://blog.csdn.net/asuradong/article/details/89424604

版权

关注微信公众号「心谭博客」，前往「xin-tan.com」
专注前端与算法的系列干货分享，欢迎关注(¬‿¬)

之前学习了HTML5的拖放事件，开发中也用到了拖拽组件。为了厘清整体的逻辑，专门做了一个小例子。

具体实现的效果也很简单：元素可以在容器中任意拖动，元素被移入容器的时候，还会有相关样式的改变已达到更好的展示效果。

例子基本运用了拖放事件的全部事件，并且尽量简洁的展示了出来。特此记录。

由名字可以看出来，拖放事件由2部分组成：拖动和释放。

而拖动又由2部分组成，分别是被拖动元素的相关事件和元素容器的相关事件。

1、被拖动元素的相关事件 ：

2、容器的相关事件 ：

事件名称	说明
dragenter	当被拖动元素进入目的地元素所占据的屏幕空间时触发，一般需要取消浏览器的默认行为。
dragover	当被拖动元素在目的地元素内时触发，一般需要取消浏览器的默认行为。
dragleave	当被拖动元素没有放下就离开目的地元素时触发

3、释放事件 ：

事件名称	说明
drop	当被拖动元素在目的地元素里放下时触发，一般需要取消浏览器的默认行为。

为了方便说明，先看代码实现的效果。请前往 Github仓库下载 demo.html 和 demo.js 到本地，然后用Chrome打开html文件，初始效果如下图：

将图中的可拖拽元素，拖放到下面的容器中，这个过程的效果如下所示。箭头表示拖拽方向，方框代表动态改变的容器样式。

最后，松开鼠标，将元素放入到下面的容器中，整个过程完成。

首先，先编写html代码。因为元素可以在两个容器之间任意拖动，因此这两个容器都需要监听drapenter、dragover、dragleave、drop这四个事件。

被拖拽元素的 draggable 属性需要指明为 true ，才可以被拖拽。同时为了记录一些信息，需要监听dragstart事件。

<body>
  <script src="./demo.js"></script>
  <div 
    class

关注