计算机网络
-
HTTP 缓存
-
你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？
-
HTTP 常用的请求方式，区别和用途？
-
HTTPS 是什么？具体流程
-
三次握手和四次挥手
-
你对 TCP 滑动窗口有了解嘛？
-
WebSocket与Ajax的区别
-
了解 WebSocket 嘛？
-
HTTP 如何实现长连接？在什么时候会超时？
-
TCP 如何保证有效传输及拥塞控制原理。
-
TCP 协议怎么保证可靠的，UDP 为什么不可靠？
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
算法
-
链表
-
字符串
-
数组问题
-
二叉树
-
排序算法
-
二分查找
-
动态规划
-
BFS
-
栈
-
DFS
-
回溯算法
let located = document.querySelector(‘.location’)
// 绑定dragenter事件
located.addEventListener(‘dragenter’, function() {
console.log(‘元素进入了目标元素’);
})
// 绑定dragover事件
located.addEventListener(‘dragover’, function() {
console.log(‘元素在目标元素内’);
})
// 绑定dragleave事件
located.addEventListener(‘dragleave’, function() {
console.log(‘元素离开了目标元素’);
})
我们来看看测试效果，这里你们要仔细看被拖放元素多少面积进入或离开目标元素时才触发的对应事件
那么最后我们再来将一下如何才能触发 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 | 目标元素支持的放置行为 |
首先说一下，这个两个属性需要搭配使用，它们决定了被拖放元素 和 目标元素 之间的关系的，当设定好两者的关系后，在进行拖动操作的时候，鼠标会根据不同的关系显示不同的样式，除此之外，没有别的特别的作用。
dropEffect 可以设置以下几个属性
| 值 | 含义 |
| — | — |
| none | 默认值。不能把拖动的元素放在这里 |
| move | 应该把拖动的元素移动到该目标元素 |
| copy | 应该把拖动元素复制到该目标元素 |
| link | 表示目标元素会打开被拖放进来的元素对应的链接 |
【注意】：dropEffect 属性必须在 dragenter事件 中设置，否则无效
effectAllowed 可以设置以下几个属性
| 值 | 含义 |
| — | — |
| uninitialized | 被拖放元素没有设置放置性为 |
| none | 被拖放元素不能有放置性为 |
| copy | 只允许值为 ‘copy’ 的 dropEffect 目标元素 |
| link | 只允许值为 ‘link’ 的 dropEffect 目标元素 |
| move | 只允许值为 ‘move’ 的 dropEffect 目标元素 |
| copyLink | 只允许值为 ‘copy’ 和 ‘link’ 的 dropEffect 目标元素 |
| copymove | 只允许值为 ‘copy’ 和 ‘move’ 的 dropEffect 目标元素 |
| linkMove | 只允许值为 ‘link’ 和 ‘move’ 的 dropEffect 目标元素 |
| all | 只允许任意值的 dropEffect 目标元素 |
【注意】：effectAllowed 属性必须在 dragstart事件 中设置，否则无效
上面也说了，这两个属性基本上只是用来改变鼠标样式的，所以如果想实现特定的功能还得我们自己来重写事件的处理函数。
下面来看一个拖放实例：
需求： 将一段文本拖放到一个元素中
因为文本是默认支持的拖放元素，所以我们可以不对其做任何的事件绑定。
