时间：2023-07-20 21:09:01 | 来源：网站运营
时间：2023-07-20 21:09:01 来源：网站运营
纯 CSS 也能实现拖拽效果？：发挥你的想象，CSS也能实现拖拽效果。
在线咨询
.dragbox{ width: 300px; height: 300px; overflow: auto}.dragcon{ width: 500px; height: 500px;}只需要内部元素宽高都大于容器就实现两个方向的滚动了（记得设置overflow:auto），示意如下 .dragbox{ width: 100%; height: 100%;}.dragcon{ width: calc(200% - w); height: calc(200% - h);}用一张动图描述如下（中间的橙色块块表示拖拽目标）<body> ...页面上的其他元素 <div class=“dragbox”> <div class=“dragcon”></div> <div class=“ball”></div> <!--拖拽元素--> </div></body>关键样式如下.dragbox{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: auto}层级示意关系如下.dragbox{ /*...*/ pointer-events: none;}.ball{ /*...*/ pointer-events: all;}.dragbox.active{ /*...*/ pointer-events: all;}借助 JS 可以在按下时触发外层容器滚动ball.addEventListener('touchstart',(ev)=>{ dragbox.classList.add('active');})document.addEventListener('touchend',()=>{ dragbox.classList.remove('active');})实际效果如下<body> <div class=“dragbox”> <div class=“dragcon”></div> <div class=“ball”></div> </div> <div class=“body”> <!--单独用一层实现页面滚动--> ...页面上的其他元素 </div></body>关键样式如下.dragbox{ position: absolute; width: 100%; height: 100%; overflow: auto;}.body{ position: relative; height: 100%; overflow: auto;}.ball{ position: relative; z-index: 10; /*拖拽目标的层级设置高一点*/}现在层级关系就变成了这样<body> ...页面上的其他元素 <div class=“dragbox”> <div class=“dragcon”>A</div> <div class=“dragcon”>B</div> <div class=“ball”></div> </div></body>下面是关键样式.dragbox{ ... scroll-snap-type: x mandatory;}.dragcon{ scroll-snap-align: start;}实际效果如下dragbox.scrollLeft = 999;dragbox.scrollTop = 999;除此之外，也可以采用纯 HTML 方式实现，利用元素的 autofocus 自动聚焦到可视范围的特性<div class=“dragcon"> ... <button class="pos" autofocus></button> <!--添加一个自动聚焦的元素--></div>比如你希望初始位置在左上角，那么添加一个右下角的自动聚焦元素就可以了（当然还需要设置透明度等隐藏起来）~.dragbox{ left: 10px; top: 10px; right: 10px; bottom: 10px; /*rect: 10px;*/}.dragbox{ padding: 10px;}本文作者：严文彬
原创声明：本文为阅文前端团队 YFE 成员出品，请尊重原创，转载请联系公众号 ( id: yuewen_YFE ) 获取授权，并注明作者、出处和链接。
关键词：效果,实现
