拖动<a>标签创建书签时如何修改书签名称为当前文档标题

完全可以实现，有两种成熟实现方案如下：

• 方案1：动态修改拖拽时的链接文本（适配动态页面标题场景）
  实现原理：监听链接的拖拽事件，在拖拽触发瞬间临时替换链接文本为当前文档标题，拖拽结束后自动恢复原有文本，浏览器会以拖拽瞬间的链接文本作为默认书签名称，用户无感知。
  参考代码如下：

<p>Drag this <a href="https://example.com" id="customBookmark">link</a> to save this webpage as a bookmark</p>

<script>
const bookmarkEl = document.getElementById('customBookmark');
const defaultText = bookmarkEl.textContent;

// 拖拽开始时替换为当前文档标题
bookmarkEl.addEventListener('dragstart', () => {
  bookmarkEl.textContent = document.title;
});

// 拖拽结束恢复原有文本
bookmarkEl.addEventListener('dragend', () => {
  bookmarkEl.textContent = defaultText;
});
</script>

该方案兼容Chrome、Firefox、Safari等所有主流桌面浏览器。

• 方案2：静态指定书签名称（适配页面标题固定的场景）
  如果页面标题是固定值，不需要动态获取，可以直接在HTML中把a标签的文本设置为目标标题即可，无需额外脚本。

补充注意：如果你的需求是让用户拖拽后保存的是当前页面的书签，而非指向example.com的链接，可以把a标签的href属性改为javascript:location.href=window.location.href，结合方案1的拖拽事件修改文本，就能实现拖拽保存当前页书签、自动匹配当前页标题的效果。

内容的提问来源于stack exchange，提问作者999