我们来看看测试效果
（2）目标元素的事件
在实现拖放功能的过程中，目标元素上的事件有如下三个
| 事件 | 含义 |
| — | — |
| dragenter | 被拖放元素进入目标元素时触发 |
| dragover | 被拖放元素在目标元素内时触发（频繁触发） |
| dragleave | 被拖动元素离开目标元素时触发 |
| drop | 当被拖动元素被放到了目标元素中时触发 |
这里我要详细讲解一下这三个事件的触发规则：
-
dragenter事件与
mouseover事件类似，那怎样才算被拖放元素进入目标元素呢？经过测试发现，当被拖放元素的一半以上面积在目标元素内才算进入了目标元素 -
dragover事件比较特殊，当拖放元素进入目标元素以后就会一直触发，就跟你设置了一个无限循环的定时器一样，即使你不移动元素也会触发，除非拖放事件结束或者被拖放元素离开目标元素
-
dragleave事件 的其触发条件正好与
dragenter事件相反，它是当被拖放元素离开目标元素时触发，经过测试，离开目标元素的条件是：被拖放元素一半以上的面积离开目标元素 -
drop事件 可以叫做放置目标事件，它是当被拖放元素放置到了目标元素中时触发。虽然任何元素都支持该事件，但是所有元素默认都是不允许被放置的，所以在不做任何处理的情况下，该事件是不会触发的
同样的，我们来用具体的例子，先来体会一下前三个事件
我们来看看测试效果，这里你们要仔细看被拖放元素多少面积进入或离开目标元素时才触发的对应事件
那么最后我们再来将一下如何才能触发 drop事件，只需要阻止 dragenter事件 和 dragover事件 的默认行为即可。
来看下测试效果图
值得注意的是，在我们没有对 drop事件 做处理之前，将被拖放元素拖动到目标元素中时，鼠标样式会变成禁止的样式，如图
而当我们设置元素为可放置了以后，鼠标样式是这样的。如图
三、dataTransfer对象
=========================================================================
上面只是简简单单地实现了拖放功能，但并没用利用该功能做出什么实际性的功能，这里我们介绍一个拖放事件中事件对象上的一个特别重要的属性——dataTransfer
我们通过 event.dataTransfer 来获取该对象，其主要的作用就是从被拖放元素向目标元素传递一个字符串数据
（1）方法
dataTransfer上有两个方法，如下表所示
| 方法 | 含义 |
| — | — |
| setData | 设置字符串，并设置数据类型 |
| getData | 获取对应数据类型的字符串 |
setData() 方法接收两个参数，第一个参数表示的是字符串的数据类型，HTML5规定了两种数据类型，分别是 text/plain 和 text/uri-list，前者表示普通字符串，后者表示URL字符串；第二个参数 就是用于存放的字符串
getData() 方法只接收一个参数，即需要接收的字符串类型
我们来简单使用一下这两个方法
来看下测试结果
（2）属性
在 dataTransfer对象 上还有两个比较常用的属性，如下表所示
| 属性 | 含义 |
| — | — |
| dropEffect | 被拖放元素的放置行为 |
| effectAllowed | 目标元素支持的放置行为 |
首先说一下，这个两个属性需要搭配使用，它们决定了被拖放元素 和 目标元素 之间的关系的，当设定好两者的关系后，在进行拖动操作的时候，鼠标会根据不同的关系显示不同的样式，除此之外，没有别的特别的作用。
最后
中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。
-
技术要深入到什么程度？
-
做久了技术总要转型管理？
-
我能做什么，我想做什么？
-
一技之长，就是深耕你的专业技能，你的专业技术。（重点）
-
独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）
-
拥有事业，选择一份使命，带领团队实现它。（创业）
一技之长分五个层次
-
栈内技术 - 是指你的前端专业领域技术
-
栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识
-
工程经验 - 是建设专业技术体系的“解决方案”
-
带人做事 - 是对团队协作能力的要求
-
业界发声 - 工作经验总结对外分享，与他人交流
永远不要放弃一技之长，它值得你长期
信仰持有。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。
