可拖动元素

需要澄清的是，即使我们用 HTML 和 CSS 完成了这项工作，我们也只是让元素在屏幕上可拖动。如果您实际上需要在拖动过程中做些什么，那么您又回到了 JavaScript 的领域。

这个技巧来自 Scott Kellum。多年来，斯科特做了很多我最喜欢的 CSS 技巧，比如这个超级 简单的 @keyframes 设置，它让元素像老式屏幕保护程序一样从视窗边缘弹回，以及令人印象深刻的 Sass 支持的视差技术。

实际上只有一个 CSS 功能可以帮助我们进行点击拖动，那就是我们在桌面浏览器中使用 resize 属性时获得的浏览器 UI。这是一个 <div>，我们使用了它（以及 overflow: hidden;，这是它起作用的先决条件）

如果您使用的是桌面浏览器查看 演示，您可以抓取它的右下角并将其拖动。

现在是真正的技巧。

我们可以将那个可调整大小的元素放入另一个容器中。该容器会随着可调整大小元素的高度变化而自然增长。它会因为 width: min-content; 而自然改变宽度。

现在我们有一个父元素，它会随着可调整大小的元素一起调整大小。这很重要，因为我们可以将其他内容放入该父元素中，这些内容会与它一起移动。我将在其中放置一个大大的 ✖，并将其直接放置在调整器之上，并对其使用 pointer-events: none;，这样我仍然可以进行调整大小

现在，如果我们通过 opacity: 0; 确保调整大小元素隐藏，看起来就像我们凭空制作了一个可拖动元素！我们可能需要调整一下数字，以使它们对齐，但它是 可行的