写在前面

在日常使用微信的时候，当我们收到朋友转发的多条合并聊天记录的时候，其中的文字是「可拖拽」的（如下图）。就好比当我们收到某个需求，是一个合并转发的多条聊天记录，此时就无需复制一大段文字，再新建文档进行存储，只需要轻轻一拖就可以完成存储记录操作。

一般情况下，这在正常网页中，像超链接文本、图片等元素都是默认可以正常拖动的，其实文字同样也可以达到这样的效果，只需要用到 html5 新增 draggable 属性即可。

draggable 属性

在 HTML 的全局属性中，draggable 只有三个属性值，即：true 和 false ，还有个 auto 默认值， 但是 draggable 并不是一个布尔型属性，而是一个枚举类型属性。

所以 draggable 的属性使用非常简单，同时，因为是一个枚举类型属性值，所以 draggable 的使用只有 true 和 false ，像默认简写是一个错误用法。

    <!-- 错误写法： -->
    <label draggable>Example Label</label>
    <!-- 正确写法： -->
    <label draggable="true">Example Label</label> 
    <!-- 或者 -->
    <label draggable="false">Example Label</label>

默认情况下，当 draggable 没有设定属性值时，属性值为 auto ，表示浏览器的默认行为，而浏览器在默认情况下，只有已选中的文本、图片、链接可以拖动。对其它的元素来说，必须按拖动机制的顺序设置 ondragstart 事件才能正常工作。

使用案例

当 draggable 属性值为 false 或者没有设置该属性时，文字是无法拖动的。

当给 draggable 属性值为 true 时，我们页面中的文字就变成了可拖动的文字，同样也可以像文章开头微信示例一样，进行拖拽到本地自动生成文本并存储。

MDN 对 draggable 元素说明

Experimental: 这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

写在最后

昨天无意间一个群友提到这个属性，让我想起了早期使用微信（博文开头所说）的一个场景，这个属性除了可以做简单的文字移动意外，搭配 js 还可以实现例如：将一个段文字拖动到指定区域、将一段文字或者某个图片从一个区域到另一个区域来回移动……等需求。

由于我个人目前还在学习阶段，尚未发现或遇到 draggable 属性在实际开发中的应用场景，或许以后会遇到，目前单纯觉得好玩，记录一下。