javascript基础学习系列四百九十：dropEffect与effectAllowed

dataTransfer 对象不仅可以用于实现简单的数据传输，还可以用于确定能够对被拖动元素和放置 目标执行什么操作。为此，可以使用两个属性:dropEffect 与 effectAllowed。
dropEffect 属性可以告诉浏览器允许哪种放置行为。这个属性有以下 4 种可能的值。  “none”:被拖动元素不能放到这里。这是除文本框之外所有元素的默认值。
 “move”:被拖动元素应该移动到放置目标。
 “copy”:被拖动元素应该复制到放置目标。
 “link”:表示放置目标会导航到被拖动元素(仅在它是 URL 的情况下)。
在把元素拖动到放置目标上时，上述每种值都会导致显示一种不同的光标。不过，是否导致光标示 意的动作还要取决于开发者。换句话说，如果没有代码参与，则没有什么会自动移动、复制或链接。唯 一不用考虑的就是光标自己会变。为了使用 dropEffect 属性，必须在放置目标的 ondragenter 事件 处理程序中设置它。
除非同时设置 effectAllowed，否则 dropEffect 属性也没有用。effectAllowed 属性表示对 被拖动元素是否允许 dropEffect。这个属性有如下几个可能的值。
 “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。
必须在 ondragstart 事件处理程序中设置这个属性。 假设我们想允许用户把文本从一个文本框拖动到一个

元素。那么必须同时把 dropEffect 和
effectAllowed 属性设置为"move"。因为

元素上放置事件的默认行为是什么也不做，所以文本 不会自动地移动自己。如果覆盖这个默认行为，文本就会自动从文本框中被移除。然后是否把文本插入

元素就取决于你了。如果是把 dropEffect 和 effectAllowed 属性设置为"copy"，那么文本 框中的文本不会自动被移除。
20.6.5 可拖动能力
默认情况下，图片、链接和文本是可拖动的，这意味着无须额外代码用户便可以拖动它们。文本只 有在被选中后才可以拖动，而图片和链接在任意时候都是可以拖动的。
我们也可以让其他元素变得可以拖动。HTML5 在所有 HTML 元素上规定了一个 draggable 属性， 表示元素是否可以拖动。图片和链接的 draggable 属性自动被设置为 true，而其他所有元素此属性 的默认值为 false。如果想让其他元素可拖动，或者不允许图片和链接被拖动，都可以设置这个属性。 例如:

<!-- 禁止拖动图片 -->
<img src="smile.gif" draggable="false" alt="Smiley face"> <!-- 让元素可以拖动 -->
<div draggable="true">...</div>

其他成员

HTML5 规范还为 dataTransfer 对象定义了下列方法。
 addElement(element):为拖动操作添加元素。这纯粹是为了传输数据，不会影响拖动操作的
外观。在本书写作时，还没有浏览器实现这个方法。
 clearData(format):清除以特定格式存储的数据。
 setDragImage(element, x, y):允许指定拖动发生时显示在光标下面的图片。这个方法接
收 3 个参数:要显示的 HTML 元素及标识光标位置的图片上的 x 和 y 坐标。这里的 HTML 元素
可以是一张图片，此时显示图片;也可以是其他任何元素，此时显示渲染后的元素。
 types:当前存储的数据类型列表。这个集合类似数组，以字符串形式保存数据类型，比如"text"。

Notifications API

Notifications API 用于向用户显示通知。无论从哪个角度看，这里的通知都很类似 alert()对话框: 都使用 JavaScript API 触发页面外部的浏览器行为，而且都允许页面处理用户与对话框或通知弹层的交 互。不过，通知提供更灵活的自定义能力。
Notifications API 在 Service Worker 中非常有用。渐进 Web 应用(PWA，Progressive Web Application) 通过触发通知可以在页面不活跃时向用户显示消息，看起来就像原生应用。

通知权限

Notifications API 有被滥用的可能，因此默认会开启两项安全措施: 20  通知只能在运行在安全上下文的代码中被触发;
 通知必须按照每个源的原则明确得到用户允许。
用户授权显示通知是通过浏览器内部的一个对话框完成的。除非用户没有明确给出允许或拒绝的答 复，否则这个权限请求对每个域只会出现一次。浏览器会记住用户的选择，如果被拒绝则无法重来。
页面可以使用全局对象 Notification 向用户请求通知权限。这个对象有一个 requestPemission() 方法，该方法返回一个期约，用户在授权对话框上执行操作后这个期约会解决。

   Notification.requestPermission()
        .then((permission) => {
console.log('User responded to permission request:', permission); });

“granted"值意味着用户明确授权了显示通知的权限。除此之外的其他值意味着显示通知会静默失 败。如果用户拒绝授权，这个值就是"denied”。一旦拒绝，就无法通过编程方式挽回，因为不可能再 触发授权提示。

显示和隐藏通知

Notification 构造函数用于创建和显示通知。最简单的通知形式是只显示一个标题，这个标题内 容可以作为第一个参数传给 Notification 构造函数。以下面这种方式调用 Notification，应该会 立即显示通知:

new Notification('Title text!');

可以通过 options 参数对通知进行自定义，包括设置通知的主体、图片和振动等:

new Notification('Title text!', { body: 'Body text!',
image: 'path/to/image.png', vibrate: true
});

调用这个构造函数返回的 Notification 对象的 close()方法可以关闭显示的通知。下面的例子 展示了显示通知后 1000 毫秒再关闭它:

const n = new Notification('I will close in 1000ms'); setTimeout(() => n.close(), 1000);