背景鼠标拖动元素移动，是一个稍微复杂的交互。在这篇文章中，我们将打破常规，介绍一个超强大的鼠标点击和拖动效果，只用纯CSS就可以实现。在之前的文章——令人难以置信的纯CSS实现鼠标跟随中，我们介绍了很多有趣的纯CSS鼠标跟随效果，像这样：但是，大家可以看到在上面的效果中，元素的移动并不是很顺滑。如果你了解上面的实现，你就会知道它有比较大的局限性。在本文中，我们仅使用CSS来实现丝滑的鼠标点击和拖动元素移动效果。点击拖动鼠标跟随效果OK，什么意思？先来看一个最简单的效果图，实现点击元素拖动元素移动的效果：OK，到此为止，继续看之前可以先停一停。通常，这种效果必须借助JavaScript才能实现。从性能上看：先拖动元素，可以任意移动元素然后放置元素，让元素留在另一个地方想想，如果不用JavaScript，有办法移动元素球从A点到B点是什么？这个效果完全不是像纯CSS可以做到的。答案必须是肯定的！整个过程也非常巧妙，这里我们需要用到其核心强大的resize属性。并且，通过搭建巧妙的布局，合作解决可能遇到的各种问题。使用resize构建可以拖动和调整大小的元素首先，我们使用resize属性来实现一个可调整大小的元素。什么是调整大小？根据MDN--resize：此CSS属性允许您控制元素的可调整大小的属性。它的CSS语法如下：{/*关键字值*/resize:none;调整大小：两者；调整大小：水平；调整大小：垂直；调整大小：块；用户缩放resize:both:允许用户在水平和垂直方向调整元素大小resize:horizo??ntal:允许用户水平调整元素大小resize:vertical:允许用户垂直调整元素大小resize:block:元素显示机制这允许用户根据writing-mode和direction值在块方向上水平或垂直调整元素的大小。resize:inline：根据书写模式（writing-mode）和方向值（direction），元素显示一种机制，允许用户在行内方向（inline）水平或垂直调整元素的大小。看最简单的DEMO：
Loremipsumdolorsitamet,consecteturadipisicingelit。Autquilaborererumplaceatsimiliquehicconsequaturtemporedoloribusliquidalias,nobisvoluptates。Perferendis,voluptateplaceatessesolutadelenitiid!p{宽度：200px；高度：200px；调整大小：水平；overflow:scroll;}在这里，我们设置了一个长宽为200px的
，通过水平拖动来改变宽度。效果如下：简单总结一些tips：resize需要配合overflow:scroll才能生效。当然准确的说法是overflow是不可见的，或者直接作用于替换元素，比如images，