js实现拖拽事件

柳枝.

于 2022-12-22 20:10:12 发布

阅读量324

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/m0_72527416/article/details/128413030

版权

本文介绍了JavaScript实现拖放事件的详细步骤，包括被拖动元素的`ondragstart`事件，容器的`ondragover`和`ondrop`事件。通过设置`draggable`属性，`dataTransfer.setData()`和`appendChild()`等方法，实现元素的拖放功能。

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

拖放事件

拖放是由拖动与释放两部分组成，拖放事件也分为被拖动元素的相关事件，和容器的相关事件。

被拖动元素的相关事件如下所示：

事件	描述
ondragstart	用户开始拖动元素时触发
ondrag	元素正在拖动时触发
ondragend	用户完成元素拖动后触发

容器相关事件如下所示：

事件	描述
ondragenter	当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover	当被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave	当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop	在一个拖动过程中，释放鼠标键时触发此事件

如何实现元素的拖放

首先创建一个HTML文本，用于测试代码，如下所示：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>HTML5学习</title>
            <style type="text/css">
                .di