CSS实现拖拽功能,你是认真的吗?

我是小渔歌,点击右上方“关注”,每天为你分享【前端技术知识】干货。

大家看下这个gif动态图上的拖拽效果,用CSS可以实现吗?


文章图片1


这个时完全可以用CSS实现的,说了大家可能不信,话不多说,下面就带大家一步一步实现这个拖拽功能。

CSS实现原理

在网页开发中,几乎每天都和页面滚动打招呼,在PC端中页面超过盒子高度,即可使用鼠标滚轮进行页面的滚动,而在移动端是通过手指滑动进行页面滚动。 同时开启水平垂直方向的滚动,设置overflow:auto,大家猜猜会发生什么?

当子元素超出父元素才会出现滚动条。

这时,在PC端垂直方向上可以通过鼠标滚轮滚动,水平方向上则是通过shift健加鼠标滚轮,只能同时滚动一个方向。
但是移动端就不一样了,他可以通过手指滑动任意方向滚动(拖动)。


基于这个就能实现上面的拖拽功能,是不是很神奇。


下面来说下实现所需的元素盒子布局:
container:外层盒子,设置overflow:auto
dragContainer:宽高大于外层container的宽高,这样才会出现滚动。
content:网页内容区域。
dragBtn:一个用于拖拽交互的button。

完整结构代码

    
class="container"> <div class="dragContainer"> <div class="LR"> <div class="L"> L div> <div class="R"> R div> div> <div class="content"> div> <div class="dragBtn"> div> div> div>


实现元素层级图

文章图片2

实现拖拽层级图

dragContainer 的宽高是container的2倍,这样dragContainer整个在移动端就可以拖动了。

主要样式代码

.container {        position: absolute;        left: 0px;        top: 0px;        right: 0px;        bottom: 0px;        width: 100%;        height: 100%;        overflow: auto;    }        .dragContainer {        width: 200%;        height: 200%;    }


文章图片3

dragContainer拖动效果图

然后在加上dragBtn按钮

注意:此时的dragContainer的宽高要减去dragBtn的宽高,以达到按钮一直在可视区域的效果。

主要样式代码

.container {        position: absolute;        left: 0px;        top: 0px;        right: 0px;        bottom: 0px;        width: 100%;        height: 100%;        overflow: auto;    }    .dragContainer {        width: calc(200% - 50px);        height: calc(200% - 50px);    }    .dragBtn {        width: 50px;        height: 50px;        border-radius: 50%;        background: #FFD966;        position: absolute;        right: 0;        bottom: 0;    }


文章图片4

加上dragBtn效果图

哈哈,此时是不是有点那个意思了。

不过此时拖动非按钮区域,按钮也跟着动。现在我们要实现只拖动dragBtn按钮才动

此刻我们把content固定。

注意:content的层级应该在dragBtn与dragContainer之间。

主要样式代码

    .content {        width: 100vw;        height: 100vh;        overflow: auto;        position: fixed;        left: 0;        top: 0;    }


文章图片5

哈哈,是不是很完美,不过我们还差一步,按钮的边缘吸附效果,

按钮边缘吸附效果实现

那怎么样实现吸附效果呢?

大家可以思考下,CSS有什么属性可以做到。

主要用到scroll-snap-type: x mandatoryscroll-snap-align: start这两个属性。

我之前有一篇文章提起过这个CSS属性,感兴趣的可以看下,链接在下方

能用CSS实现的效果,就尽量把Javascript踢开吧?

主要样式代码

     .container {        position: absolute;        left: 0px;        top: 0px;        right: 0px;        bottom: 0px;        width: 100%;        height: 100%;        overflow: auto;        scroll-snap-type: x mandatory;    } .LR {        display: flex;        width: 100%;        height: 100%;    }        .L {        background: rgba(255, 0, 0, 0.1);    }        .L,    .R {        flex-grow: 1;        scroll-snap-align: start;        display: flex;        align-items: center;        justify-content: center;        font-size: 30px;        font-weight: bold;    }

这里我们给L加了歌背景半透明的颜色,这样看起来更清晰点。

文章图片6

吸附效果图

完整样式代码

  * {        padding: 0;    }    body {        overflow: hidden;    }    .container {        position: absolute;        left: 0px;        top: 0px;        right: 0px;        bottom: 0px;        width: 100%;        height: 100%;        overflow: auto;        scroll-snap-type: x mandatory;    }    .dragContainer {        width: calc(200% - 50px);        height: calc(200% - 50px);    }    .LR {        display: flex;        width: 100%;        height: 100%;    }        .L {        background: rgba(255, 0, 0, 0.1);    }    .L,    .R {        flex-grow: 1;        scroll-snap-align: start;        display: flex;        align-items: center;        justify-content: center;        font-size: 30px;        font-weight: bold;    }    .dragBtn {        width: 50px;        height: 50px;        border-radius: 50%;        background: #FFD966;        position: absolute;        right: 0;        bottom: 0;    }    .container::-webkit-scrollbar {        width: 0 !important    }    .content {        width: 100vw;        height: 100vh;        overflow: auto;        position: fixed;        left: 0;        top: 0;    }    .item {        height: 80px;        font-size: 20px;        border: 1px solid #333333;        border-radius: 10px;        display: flex;        align-items: center;        padding: 0 20px;        font-weight: bold;        font-family: "仿宋"    }

最终实现效果图

文章图片7

完整效果图

总结

主要是利用移动端水平和垂直方向超出区域可以随意拖动的原理,按钮吸附效果是借助CSS3的scroll-snap-type: x mandatory与scroll-snap-align: start这两个属性实现的。

往期精彩内容

能用CSS实现的效果,就尽量把Javascript踢开吧?

在JavaScript中call与apply的实际应用你知道多少?

作者介绍

小渔歌,90后前端研发工程师,热爱生活,一个在劳动中不断学习的人,愿我们共同进步,点关注不迷路

CSS实现拖拽功能,你是认真的吗?

我是小渔歌,点击右上方“关注”,每天为你分享【前端技术知识】干货。大家看下这个gif动态图上的拖拽效果,用CSS可以实现吗?这个时完全可以用CS

教育产品的游戏化设计

的行为,玩具是儿童的天使。”如果能把“玩”代入教育是否能缓解教育带来的“复制性”?在高分纪录片《他乡的童年》中,我看到了不同国家的儿童教育差异:印度的教育注重“思辨”,在课堂上看到的大多是对知识/观点辩驳;芬兰的教育注重“真实的生活”,老师带着学生在森林里上课,素材都是大自然的材料,他们主张学习的目的是为了生活而非应试;日本的教育是为了“为他人着想”,以此为

某游戏服务运维架构进化史(上云方案)

网站架构百度百科:网站架构,一般认为是根据客户需求分析的结果,准确定位网站目标群体,设定网站整体架构,规划、设计网站栏目及其内容,制定网站开发流程及顺序,以最大限度地进行高效资源分配与管理的设计。

手游出海全球七大市场,你真的了解目标玩家的偏好品类吗?

日本、美国、印尼、土耳其、德国、墨西哥与俄罗斯,是游戏出海重…市场中表现不错,上榜收入 的产品中,多个品类下均有国产游戏的身影,尤其在策略类游戏中占比最多。 可以发现,策略类游戏在德国占据了非常高的比重,中国出海游戏选择打入这块市场,仍是一个不错的选择。考虑到竞争趋于充分,针对德国当地玩家偏好的题材,…戏明日方舟|全战三国|中国游戏圈多现实如果你认为写得好,不妨

unity圆圈自动吸附屏幕边缘

效果: 设置如下: