css拖拽样式,HTML5的拖拽
目录
一、拖拽效果示例二。CSS实现原理3。CSS实现的细节。CSS实现的布局1。固定定位五、CSS实现的其他功能1。吸附功能六。描述和总结运用你的想象力。CSS也可以实现拖拽效果。
一、拖拽效果示例
这是移动终端上非常常见的效果。可以按住拖来拖去，比如下面的触屏版起点[1]:
这种效果用JS很容易实现，不过无非就是多计算，多考虑一些关键场景，然后多写代码。但是我脑洞之后发现CSS几乎可以达到这个效果，然后往下看。
二、CSS实现原理
在传统web中，页面滚动是非常常见的交互，操作为利用鼠标滚轮或者直接拖动滚动条。但是，移动端不一样。直接用手指拖动页面就可以滚动了。的页面通常是垂直或水平滚动的。例如，如果两个方向都可以滚动呢？。dragbox { width:300 px；高度：300px溢出：auto}。dragcon { width:500 px；高度：500px}只有内部元素的宽度和高度大于容器(记得设置overflow:auto)，才能双向滚动，如下图。
一般来说，鼠标滚轮同一时间只能向一个方向滚动(按住Shift向另一个方向滚动)，但移动端可以是直接拖着内容任意滚动，如下图。
现在，在内容中间添加一个元素，并沿着内容区域滚动。
接下来，隐藏下面的文本。
是不是有点像拖拽的味道？原理就是这么简单！
三、CSS实现细节
首先确定拖动目标和拖动容器的大小关系。假设拖动目标的大小为w * h，很容易得到大小关系：内部尺寸是容器的2倍减去拖拽目标的尺寸。dragbox{宽度：100%；身高：100%；}.dragcon { width:calc(200%-w)；高度：calc(200%-h)；}用一个移动的图片描述如下(中间的橙色块表示拖动目标)
四、CSS实现布局
接下来，我们需要将此功能添加到页面中。这里有两种布局。
1. fixed 定位
现在直接将刚才的布局添加到页面中，并添加fixed定位。
身体上的其他元素.page div class=" dragbox " div class=" dragcon "/div div class=" ball "/div！-拖放元素- /div/body键样式如下。dragbox{位置：固定；左：0；top:0；右：0；底部：0；溢出：auto}层次关系示意图如下
这样dragbox一定会挡住页面原来的部分，所以拖动的时候需要加上pointer-events: none;和pointer-events: all。拖拽框{ /*.*/指针-事件：无；}.球{ /*.*/指针-事件：全部；}.dragbox.active{ /*.*/指针-事件：全部；} JS按下时可以触发外容器滚动。
ball . addevent listener( touch start ，(ev)={ drag box . class list . add( active )；})document . addevent listener( touch end ，()={ dragbox . class list . remove( active )；})实际效果如下
完整的代码可以访问https://codepen.io/xboxyan/pen/PobwxBK(请打开移动模式为(PC访问)
也可以直接扫描下方二维码。
1.绝对定位水准仪
前一种布局由于fixed定位级别的影响，不得不借助JS动态改变容器的状态。既可以拖拽，又不影响原有页面有什么办法实现？我们来看看这个布局，用absolute定位。
这里，您需要在原始页面上包装一层div容器，如下所示
body div class=" dragbox " div class=" dragcon "/div div class=" ball "/div/div div class=" body "！-用单层滚动页面-.page /div/body键样式上的其他元素如下。dragbox { position:absolute；宽度：100%；身高：100%；溢出：自动；}.身体{位置：相对；身高：100%；溢出：自动；}.球{位置：相对；z指数：10；/*拖拽目标设置层次高一点*/}现在层次变成这样。
这里原页面的内容在层次上在dragbox和拖拽目标之间，所以拖动时不会影响原页面的滚动，无需任何 JS 处理。
完整的代码可以访问https://codepen.io/xboxyan/pen/bGBNQxL(请打开移动模式为(PC访问)
也可以直接扫描下方二维码。
提示：以上两种布局方式中，第一种适应性更强，不影响已有项目；第二种体验更好，但是会用div作为页面滚动容器，对页面结构做一些改动。可以根据实际情况自己选择。
五、CSS实现其他功能
1. 吸附功能
很多时候需要在拖动结束时自动附着到边缘，就像文章开头的示意图一样。那么，什么属性可以与吸附联系在一起呢？
答案是CSS滚动捕捉[2]
身体上的其他元素.page div class=" dragbox " div class=" dragcon " a/div div class=" dragcon " b/div div class=" ball "/div/div/body以下是主要样式。拖拽框{.scroll-snap-type: x强制；}.dragcon { scroll-snap-align:start；}实际效果如下
完整的代码可以访问https://codepen.io/xboxyan/pen/XWNJyPw(请打开移动模式为(PC访问)
也可以直接扫描下方二维码。
1.设置初始位置
默认情况下，拖动目标只在右下角。怎么能位于左下角呢？很简单。这里拖动是通过滚动容器实现的，所以只能使用需要改变scrollLeft或scrollTop。
dragbox.scrollLeft=999dragbox.scrollTop=999另外，也可以用纯HTML实现，利用元素的 autofocus 自动聚焦到可视范围的特性
div class="dragcon ".button class=pos 自动对焦/按钮！-添加自动对焦元素- /div例如，如果你希望初始位置为左上角，那么你可以添加一个右下角的自动对焦元素(当然你需要设置透明度并隐藏)~
1.设定界限
现在拖动目标的边界是屏幕的边缘，有时可能需要留出一些空间。这个需求在CSS中很容易，可以通过很多方式来改变，比如left/top/right/bottom，padding，border ...。dragbox { left:10px；top:10px；右：10px底部：10px/* rect:10px；*/}.dragbox { padding:10px；}
六、说明和小结
关于兼容性，我以为没什么问题。其实ios有很多问题，主要是safari滚动容器的问题。比如一些较低版本的ios滚动不流畅，需要添加。
-webkit-overflow-scrolling:touch，可以实现平滑滚动和自动吸附，但是会导致层次问题。一些文档描述了设置该属性将创建具有最高层次的本机滚动容器。还有第一个固定的布局。如果pointer-events: none 默认设置，在touchstart 之后设置为auto ，这个在ios上滚动的时候其实是失败的，但是反过来就可以了(ios在demo中已经兼容了)。
嗯，继承了CSS的灵活性的优点是几乎零成本，易于重用，同时使用原生滚动，不会出现卡顿。
但是，也有一些限制。如果是拖拽目标的尺寸是不固定的，可能需要用JS来获取。当然，相比较而言，这是一个非常划算的实现。
现在回想起来，我其实并没有用什么很生僻的属性(scroll-snap可能算一个，但毕竟是辅助功能)。主要是共同作用。然后通过联想和发散，根据日常积累，我充分挖掘原生能力，最终完成所需的交互。然后我有了这篇文章。
感谢您的阅读，希望对以后的工作有所启发。
参考
[1]https://m.qidian.com/,启点
[2] CSS滚动快照：https://developer . Mozilla . org/zh-CN/docs/Web/CSS/CSS _ Scroll _ Snap
以上就是这篇关于纯CSS实现拖拽效果的代码。关于CSS实现拖放效果的更多信息，请搜索之前的文章或者继续浏览下面的相关文章。希望你以后能支持我！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。