OneYoung

Appearance

HTML5 的连通性功能主要涉及与服务器或其他客户端之间的通信和交互，以及在网页上实现实时的、动态的操作。

HTML5 提供了 Web Sockets、Server-Sent Events、Fetch API 等技术，使得与服务器之间的通信更加高效和实时，支持双向通信和服务器推送。

2-1.Drag ​

拖拽事件（Drag）允许用户通过点击并拖动页面上的元素来实现交互操作。

2-1-1.拖拽元素 ​

拖拽元素分为两部分：拖拽源 origin 和拖拽目标 target。

拖拽相关事件涉及到：

  • 拖拽源：dragstart、drag、dragend
  • 拖拽目标：dragenter、dragover、dragleave、drop

2-1-2.拖拽注意点 ​

  1. img 图片元素默认是能够拖拽的，其他元素需要设置 DOM 标签上的 draggable 属性为 true。

  2. 另外为了保证 drop 事件的触发，需要在 dragover 事件中调用 event.preventDefault() 方法，已阻止默认事件。

2-1-3.数据通信 ​

事件对象 event 中的 dataTransfer 属性用于在拖拽源和拖拽目标之间传递数据。

dataTransfer 属性中的 setData 方法用于设置数据，getData 方法用于获取数据。

另外，要注意的是，setData 方法只能设置字符串类型的数据，如果需要传递对象，需要使用 JSON.stringify 方法将对象转换为字符串。

譬如：

js
// 拖拽源
event.dataTransfer.setData('text/plain', JSON.stringify({ name: '张三' }))

// 拖拽目标
const data = JSON.parse(event.dataTransfer.getData('text/plain'))

2-1-3.Demo ​

2-2.WebSocket ​

2-3.Server-Sent Events ​

2-4.EventStream ​

ChatGPT