H5拖拽7个事件

最新推荐文章于 2025-05-19 15:11:52 发布

原创

最新推荐文章于 2025-05-19 15:11:52 发布 · 6.1k 阅读

6 ·

CC 4.0 BY-SA版权

本文介绍了HTML5的拖放功能，包括拖动源、放置目标和数据传输的原理，强调了MIME类型在数据传输中的重要性。详细阐述了拖放的7个关键事件：ondragstart、ondrag、ondragenter、ondragleave、ondragover、ondrop和ondragend，以及它们在拖放操作中的作用。同时，提到了事件捕获和冒泡的概念，并讨论了Firefox和Chrome的兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.简介
（1）蓝图

拖动源
放置目标
拖放并不是单纯的把目标从一个地方移动另一个地方，其实是促成成功交互的操作过程中的反馈。

光标指示当前的位置是否可防置目标
用户提示是移动、链接或者复制
鼠标经过的地方样式改变，提示此处可以放置。
为满足以上的要求，浏览器在拖拽的每个过程中发起一系列的事件。

数据传输：一组对象，这个对象用来公开存储，拖动数据存储是拖放操作的基础。可以将传输数据理解成拖放的中央控制部分，用于反馈的图片以及数据自身的检索全部都在数据传输中管理。类似网络传输谈判，此时根本无需让拖动源和放置目标知道彼此的存在。此时其重要作用的就是MIME类型！

（2）MIME 多功能因特网邮件扩展服务

text/plain
image/png
image/jpeg
text/x-age 传递自定义的信息类型
事件
事件捕获：从父辈–→中间–→子辈
事件冒泡：反向
event.stopPropagation //阻止事件沿事件捕获链向下传递或者通过冒泡阶段向上传递。
event.preventDefault //阻止事件的默认行为，比如链接跳转。
“------------------------------------------------------------------------------------------------------------”
2.H5拖拽的7个事件分别是
ondragstart 只能在这个事件的过程中支持dataTransfer通过setData来设置数据。这是为了安全考虑。编号1
ondrag 拖动过程中持续发生的事件。就是鼠标移动的过程中会反复的调用此事件。编号2
ondragenter 拖动跨入了页面中新元素的时候触发，适用于设置拖放的放置反馈。编号3
ondragleave 恢复放置反馈，与上一事件相对。编号4
ondragover 不同于drag事件，此事件是在当前鼠标停留的目标上调用。编号5
ondrop 释放鼠标调用，要放置包含处理放置动作的代码。编号6
ondragend 在拖动源中触发，适合清空拖动过程的状态。编号7

3.设置、传输和控制
设置可以拖动，很简单就一句话

<div id = "huang" draggable="true">
setData(formate, data) //设置数据

getData(formate) //获得数据

types 一数组形式返回所有当前注册的格式

items 返回所有想及其相关格式的列表

files 返回与放置相关的所有文件

clearData( )

//更改拖放反馈

setDragImage(element, x, y)：图片出现在鼠标的旁边，则x，y就是相对鼠标的偏移了。

addElement(element)通知浏览器将参数作为拖动反馈图像来绘制。？

//设置开发人员设置和查询

effecftAllowed( )设置参数，允许用户进行何种操作，copy/link/Move/组合

dropEffect( )

4.下面再进行展示一段代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width" initial-scale=1>
    <title>拖拽7个事件</title>
    <style>
        body{
   
   
            width: 100%;
            height: 50%;
            display: flex;
            justify-content: space-between;
        }
        #left{
   
   
            width: 150px;
            height: 300px;
            background-color: hotpink;
            user-select: none;
        }
        #right{