如何使用纯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：

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 {
    width: 200px;
    height: 200px;
    resize: horizontal;
    overflow: scroll;
}

简单总结一些小技巧：

• resize 的生效，需要配合 overflow: scroll，当然，准确的说法是，overflow 不是 visible，或者可以直接作用于替换元素譬如图像、 及