使用 HTML5 拖放 拖拽 drag drop API
HTML5 拖放 (DnD) API 意味着页面上的几乎任何元素都可以变为可拖动。在本文中,我们将介绍拖放的基础知识。
创建可拖动的内容 #
值得注意的是,在大多数浏览器中,文本选择、图像和链接是默认可拖动的。例如,如果拖动谷歌搜索上的谷歌标志,您将看到重影图像。随后可以将该图像拖放到地址栏、 <input type="file" />
元素,甚至桌面上。要使其他类型的内容可拖动,您需要使用 HTML5 DnD API。
要使对象可拖动,请对该元素设置 draggable=true
。几乎任何元素都可以支持拖动,包括图像、文件、链接、文件或页面上的任何标记。
在我们的示例中,我们将创建一个界面来重新排列一些列,它们已通过 CSS Grid 进行布局。这些列的基本标记如下所示,每个列的 draggable
属性均设置为 true
。…
近期评论