本篇文章给大家介绍一下如何使用纯CSS实现鼠标点击拖拽效果,让交互更加生动,希望对大家有所帮助!
前端(vue)入门到精通课程:进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具:点击使用
背景
鼠标拖拽元素移动,算是一个稍微有点点复杂的交互。
而在本文,我们就将打破常规,向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果。【推荐学习:css视频教程】
在之前的这篇文章中 — 不可思议的纯 CSS 实现鼠标跟随,我们介绍了非常多有意思的纯 CSS 的鼠标跟随效果,像是这样:
但是,可以看到,上面的效果中,元素的移动不是很丝滑。如果你了解上述的实现方式,就会知道它存在比较大的局限性。
本文,我们还是仅仅通过 CSS,来实现一种丝滑的鼠标点击拖动元素移动的效果。
鼠标点击拖拽跟随效果
OK,什么意思呢?我们先来看一个最最简单的效果示意图,实现点击一个元素,能够拖动元素进行移动的效果:
好的,到这里,在继续往下阅读之前,你可以停一停。这种效果,正常而言,都是必须要借助 JavaScript 才能够实现的。从表现上来看:
-
首先拖拽元素过程,可以任意将元素进行移动
-
然后放置元素,让元素停留在另外一个地方
思考一下,如果不借助 JavaScript 的话,有办法将元素小球从 A 点移动到 B 点么?这个效果完全就不像是纯 CSS 能够完成的。
答案必然是可以的!整个过程也非常之巧妙,这里我们核心需要利用强大的 resize
属性。以及,配合通过构建一种巧妙的布局,去解决可能会遇到的各种难题。
使用 resize,构建可拖拽改变大小的元素
首先,我们利用 resize
属性来实现一个可改变大小的元素。
什么是 resize
呢?根据 MDN — resize:该 CSS 属性允许你控制一个元素的可调整大小性。
其 CSS 语法如下所示:
{ /* Keyword values */ resize: none; resize: both; resize: horizontal; resize: vertical; resize: block; resize: inline; }
简单解释一下:
resize: none
:元素不能被用户缩放resize: both
:允许用户在水平和垂直方向上调整元素的大小resize: horizontal
:允许用户在水平方向上调整元素的大小resize: vertical
:允许用户在垂直方向上调整元素的大小resize: block
:根据书写模式(writing-mode)和方向值(direction),元素显示允许用户在块方向上(block)水平或垂直调整元素大小的机制。resize: inline
:根据书写模式(writing-mode)和方向值(direction),元素显示一种机制,允许用户在内联方向上(inline)水平方向或垂直方向调整元素的大小。
看一个最简单的 DEMO:
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aut qui labore rerum placeat similique hic consequatur tempore doloribus aliquid alias, nobis voluptates. Perferendis, voluptate placeat esse soluta deleniti id!</p>
p { width: 200px; height: 200px; resize: horizontal; overflow: scroll; }
这里,我们设置了一个长宽为 200px
的 <p>
为横向可拖拽改变宽度。效果如下:
简单总结一些小技巧:
resize
的生效,需要配合overflow: scroll
,当然,准确的说法是,overflow
不是visible
,或者可以直接作用于替换元素譬如图像、<video>
及<iframe>
、<textarea>
等- 我们可以通过
resize
的horizontal
、vertical
、both
来设置横向拖动、纵向拖动、横向纵向皆可拖动。 - 可以配合容器的
max-width
、min-width
、max-height
、min-height
限制可拖拽改变的一个范围
这里,如果你的对 resize
还有所疑惑,或者想了解