CSS 鼠标点击拖拽效果的实现代码


Posted in HTML / CSS onDecember 24, 2022

背景

鼠标拖拽元素移动,算是一个稍微有点点复杂的交互。

而在本文,我们就将打破常规,向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果。

在之前的这篇文章中 -- 不可思议的纯 CSS 实现鼠标跟随,我们介绍了非常多有意思的纯 CSS 的鼠标跟随效果,像是这样:

CSS 鼠标点击拖拽效果的实现代码

但是,可以看到,上面的效果中,元素的移动不是很丝滑。如果你了解上述的实现方式,就会知道它存在比较大的局限性。

本文,我们还是仅仅通过 CSS,来实现一种丝滑的鼠标点击拖动元素移动的效果。

鼠标点击拖拽跟随效果

OK,什么意思呢?我们先来看一个最最简单的效果示意图,实现点击一个元素,能够拖动元素进行移动的效果:

CSS 鼠标点击拖拽效果的实现代码

好的,到这里,在继续往下阅读之前,你可以停一停。这种效果,正常而言,都是必须要借助 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> 为横向可拖拽改变宽度。效果如下:

CSS 鼠标点击拖拽效果的实现代码

简单总结一些小技巧:

  • resize 的生效,需要配合 overflow: scroll,当然,准确的说法是,overflow 不是 visible,或者可以直接作用于替换元素譬如图像、<video> 及 <iframe><textarea> 等
  • 我们可以通过 resize 的 horizontalverticalboth 来设置横向拖动、纵向拖动、横向纵向皆可拖动。
  • 可以配合容器的 max-widthmin-widthmax-heightmin-height 限制可拖拽改变的一个范围

这里,如果你的对 resize 还有所疑惑,或者想了解更多 resize 的有趣用法,可以看看我的这篇文章:CSS 奇思妙想 | 使用 resize 实现强大的图片拖拽切换预览功能

将 resize 应用到本文实例中

OK,接下来,我们将 resize 实际运用到我们本文的例子中去,首先,我们先简单实现一个 DIV:

<div class="g-resize"></div>
.g-resize {
    width: 100px;
    height: 100px;
    border: 1px solid deeppink;
}

如下,非常普通,没有什么特别的:

CSS 鼠标点击拖拽效果的实现代码

但是,通过给这个元素加上 resize: both 以及 overflow: scroll,此时,这个元素的大小就通过元素右下角的 ICON 进行拖动改变。

简单修改下我们的 CSS 代码:

.g-resize {
    width: 100px;
    height: 100px;
    border: 1px solid deeppink;
    resize: both;
    overflow: scroll;
}

这样,我们就得到了一个灵活可以拖动的元素:

CSS 鼠标点击拖拽效果的实现代码

是的,我们的整个效果,就需要借助这个特性进行实现。

在此基础上,我们可以尝试将一个元素定位到上面这个可拖动放大缩小的元素的右下角,看着能不能实现上述的效果。

简单加一点代码:

<div class="g-resize"></div>
.g-resize {
    position: relative;
    width: 20px;
    height: 20px;
    resize: both;
    overflow: scroll;
}
.g-resize::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: deeppink;
}

我们利用元素的伪元素实现了一个小球,放置在容器的右下角看看效果:

CSS 鼠标点击拖拽效果的实现代码

如果我们再把整个设置了 resize: both 的边框隐藏呢?那么效果就会是这样:

CSS 鼠标点击拖拽效果的实现代码

Wow,整个效果已经非常的接近了!只是,认真看的话,能够看到一些瑕疵,就是还是能够看到设置了 resize 的元素的这个 ICON:

CSS 鼠标点击拖拽效果的实现代码

这个也好解决,在 Chrome 中,我们可以通过另外一个伪元素 ::-webkit-resizer ,设置这个 ICON 的隐藏。

根据 MDN - ::-webkit-resizer,它属于整体的滚动条伪类样式家族中的一员。

其中 ::-webkit-resizer 可以控制出现在某些元素底角的可拖动调整大小的滑块的样式。

所以,这里我就利用这个伪类:

.g-resize {
    position: relative;
    width: 20px;
    height: 20px;
    resize: both;
    overflow: scroll;
}
.g-resize::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: deeppink;
}
.g-resize::-webkit-resizer {
    background-color: transparent;
}

这样,这里的核心在于利用了 .g-resize::-webkit-resizer 中的 background-color: transparent,将滑块的颜色设置为了透明色。我们就得到了与文章一开始,一模一样的效果:

CSS 鼠标点击拖拽效果的实现代码

解决溢出被裁剪问题

当然,这里有个很致命的问题,如果需要移动的内容,远比设置了 resize 的容器要大,或者其初始位置不在该容器内,超出了的部分因为设置了 overflow: scroll,将无法看到。

因此上述方案存在比较大的缺陷。

举个例子,假设我们需要被拖动的元素不再是一个有这样一个简单的结构:

<div class="g-content"></div>
.g-content {
    width: 100px;
    height: 100px;
    background: black;
    pointer-event: none;
    
    &::before {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        background: yellow;
        border-radius: 50%;    
}

而像是这样,是一个更为复杂的布局内容展示(当然下面展示的也比较简单,实际中可以想象成任意复杂结构内容):

CSS 鼠标点击拖拽效果的实现代码

如果将这个结构,扔到上面的 g-resize 中:

<div class="g-resize">
    <div class="g-content"></div>
</div>

那么就会因为设置了 overflow: scroll 的原因,将完全看不到,只剩下一小块:

CSS 鼠标点击拖拽效果的实现代码

为了解决这个问题,我们得修改原本的 DOM 结构,另辟蹊径。

方法有很多,譬如可以利用 Grid 布局的一些特性。当然,这里我们只需要巧妙的加多一层,就可以完全解决这个问题。

我们来实现这样一个布局:

<div class="g-container">
    <div class="g-resize"></div>
    <div class="g-content"></div>
</div>

解释一下上述代码,其中:

  • g-container 设置为绝对定位加上 display: inline-block,这样其盒子大小就可以由内部正常流式布局盒子的大小撑开
  • g-resize 设置为 position: relative 并且设置 resize,负责提供一个可拖动大小元素,在这个元素的变化过程中,就能动态改变父容器的高宽
  • g-content 实际内容盒子,通过 position: absolute 定位到容器的右下角即可

看看完整的 CSS 代码:

.g-container {
    position: absolute;
    display: inline-block;
}
.g-resize { 
    content: "";
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    resize: both;
    overflow: scroll;
    z-index: 1;
}
.g-content {
    position: absolute;
    bottom: -80px;
    right: -80px;
    width: 100px;
    height: 100px;
    background: black;
    pointer-event: none;
    
    &::before {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        background: yellow;
        border-radius: 50%;
        transition: .3s;
    }
}
.g-container:hover .g-content::before {
    transform: scale(1.1);
    box-shadow: -2px 2px 4px -4px #333, -4px 4px 8px -4px #333;
}
.g-resize::-webkit-resizer {
    background-color: transparent;
}

下图中,你看到的所有元素,都只是 g-content 呈现出来的元素,整个效果就是这样:

CSS 鼠标点击拖拽效果的实现代码

是的,可能你会有所疑惑,下面我用简单不同颜色,标识不同不同的 DOM 结构,方便你去理解。

  • 红色边框表示整个 g-container 的大小
  • 用蓝色矩形表示设置了 g-resize 元素的大小
  • 关掉 ::-webkit-resizer 的透明设置,展示出 resize 框的可拖拽 ICON
.g-container {
    border: 3px solid red;
}
.g-resize { 
    content: "";
    background: blue;
    resize: both;
    overflow: scroll;
}
.g-resize::-webkit-resizer {
    // background-color: transparent;
}

看看这个图,整个原理基本就比较清晰的浮现了出来:

CSS 鼠标点击拖拽效果的实现代码

完整的原理代码,你可以戳这里:CodePen Demo -- Pure CSS Auto Drag Demo

实际应用

OK,用了比较大篇幅对原理进行了描述。下面我们举一个实际的应用场景。使用上述技巧制作的可拖动便签贴。灵感来自 -- scottkellum。

代码也不多,如果你了解了上面的内容,下面的代码将非常好理解:

<div class="g-container">
    <div class="g-resize"></div>
    <div class="g-content"> Lorem ipsum dolor sit amet consectetur?</div>
</div>

完整的 CSS 代码如下:

body {
    position: relative;
    padding: 10px;
    background: url("背景图");
    background-size: cover;
}
.g-container {
    position: absolute;
    display: inline-block;
}
.g-resize {
    content: "";
    position: relative;
    width: 20px;
    height: 20px;
    resize: both;
    overflow: scroll;
    z-index: 1;
}
.g-content {
    position: absolute;
    bottom: -160px;
    right: -180px;
    color: rgba(#000, 0.8);
    background-image: linear-gradient(
        160deg,
        rgb(255, 222, 30) 50%,
        rgb(255, 250, 80)
    );
    width: 200px;
    height: 180px;
    pointer-event: none;
    text-align: center;
    font-family: "marker felt", "comic sans ms", sans-serif;
    font-size: 24px;
    line-height: 1.3;
    padding: 1em;
    box-sizing: border-box;
    &:before {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        top: 0;
        left: 0;
        border-radius: 50%;
        background-image: radial-gradient(
            at 60% 30%,
            #f99,
            red 20%,
            rgb(180, 8, 0)
        );
        background-position: 20% 10%;
        cursor: pointer;
        pointer-events: none;
        transform: scale(0.8);
        box-shadow: -5px 10px 3px -8.5px #000, -1px 7px 12px -5px #000;
        transition: all 0.3s ease;
        transform: scale(0.8);
    }
}
.g-container:hover .g-content::before {
    transform: scale(0.9);
    box-shadow: -5px 10px 6px -8.5px #000, -1px 7px 16px -4px #000;
}
.g-resize::-webkit-resizer {
    background-color: transparent;
}

我们通过上述的技巧,实现了一个仅仅使用 CSS 实现的自由拖拽的便签贴。我们可以自由的将其拖拽到任意地方。看看效果:

CSS 鼠标点击拖拽效果的实现代码

当然,我们可以再配合上另外一个有意思是 HTML 属性 -- contenteditable

contenteditable 是一个 HTML TAG 的属性,表示元素是否可被用户编辑。如果可以,浏览器会修改元素的部件以允许编辑。

简单修改一下 DOM 结构:

<div class="g-container">
    <div class="g-resize"></div>
    <div class="g-content" contenteditable="true"> Lorem ipsum dolor sit amet consectetur?</div>
</div>

此时,元素不仅可以被拖动,甚至可以被重写,感受一下:

CSS 鼠标点击拖拽效果的实现代码

纯 CSS 实现的效果,非常的有意思,完整的代码,你可以戳这里:Pure CSS Auto Drag Demo

最后

基于 resize 这个 CSS 属性,其实还有很多有意思的用法。譬如我之前使用了 Resize 实现了一个图片切换预览的功能:CSS 奇思妙想 | 使用 resize 实现强大的图片拖拽切换预览功能 可以一并看看,相信能碰撞出更多火花。

到此这篇关于CSS 鼠标点击拖拽效果的实现代码的文章就介绍到这了,更多相关css鼠标点击拖拽内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
纯css3无js实现的Android Logo(有简单动画)
Jan 21 HTML / CSS
浏览器实现移动端高性能css3动画(开启gpu加速)
Dec 23 HTML / CSS
css3实现可滑动跳转的分页插件示例
May 08 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
Jun 29 HTML / CSS
css和css3弹性盒模型实现元素宽度(高度)自适应
May 15 HTML / CSS
HTML5 video视频字幕的使用和制作方法
May 03 HTML / CSS
html5 分层屏幕适配的方法
Mar 16 HTML / CSS
解决H5的a标签的download属性下载service上的文件出现跨域问题
Jul 16 HTML / CSS
基于第一个PhoneGap(cordova)的应用详解
May 03 HTML / CSS
html5 音乐播放器 audio 标签使用概述
Jul 15 HTML / CSS
Html5 webview元素定位工具的实现
Aug 07 HTML / CSS
CSS 一行代码实现头像与国旗的融合
Oct 24 HTML / CSS
详解CSS3浏览器兼容
Dec 24 #HTML / CSS
HTML5页面打开微信小程序功能实现
Sep 23 #HTML / CSS
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
Sep 23 #HTML / CSS
微信小程序纯CSS实现无限弹幕滚动效果
Sep 23 #HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
详解CSS中postion和opacity及cursor的特性
Aug 14 #HTML / CSS
html网页引入svg图片的4种方式
You might like
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
php解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
Extjs在exlipse中设置自动提示的方法
2010/04/07 Javascript
js读取本地excel文档数据的代码
2010/11/11 Javascript
js校验表单后提交表单的三种方法总结
2014/02/28 Javascript
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
JavaScript中Cookies的相关使用教程
2015/06/04 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
理解javascript对象继承
2016/04/17 Javascript
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
纯原生js实现table表格的增删
2017/01/05 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
2018/06/07 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
2020/01/12 Javascript
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
在python中的socket模块使用代理实例
2014/05/29 Python
Pandas探索之高性能函数eval和query解析
2017/10/28 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
详解Python3中的迭代器和生成器及其区别
2018/10/09 Python
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
python用700行代码实现http客户端
2021/01/14 Python
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
美国领先的医疗警报服务:Philips Lifeline
2018/03/12 全球购物
六月份红领巾广播稿
2014/02/03 职场文书
医院学雷锋活动策划方案
2014/02/15 职场文书
医学生就业推荐表自我鉴定
2014/03/26 职场文书
文明班级建设方案
2014/05/15 职场文书
超市周年庆活动方案
2014/08/16 职场文书
安全生产警示教育活动总结
2015/05/09 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书
vue中div禁止点击事件的实现
2022/04/02 Vue.js
MyBatis配置文件解析与MyBatis实例演示
2022/04/07 Java/Android
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis