Smeb
行百里者半九十
获得徽章 1
- #青训营笔记创作活动#
1月14日 打卡Day1
今日学习 ——对HTML5中拖曳操作（Drag和Drop）的优化，用原生JS实现一个自定义拖曳效果
具体实现思路就是首先要考虑鼠标的三个事件（按下，移动，松开），当点击按下的时候，克隆一个绝对定位的元素，并记录一个正在移动的状态，然后就可以判断应该执行的具体方法（是往哪儿移动，怎么移动），这样就可以让元素随着鼠标移动起来。
实现的功能分别是实现元素抓取，性能优化，实现拖曳放大，实现放置，边界判断和体验优化。
我主要是学习了一下元素抓取和拖曳放大的功能。
元素抓取的原理就是克隆，在鼠标按下的时候克隆鼠标按下的那个元素，并把克隆出来的元素设置为绝对定位，只有变成绝对定位才能让元素浮起来，实现抓取的操作。同时还需要优化操作体验，让本体隐藏，同时不改变DOM的结构，具体操作就是在按下拖动时给本体的opacity样式设置为0，结束时再改为1就能实现。而对于鼠标松开之后的回退操作，可以通过transition来实现一个自然的动画，添加一个过渡属性，得到一个自然的回退动画。
拖曳放大的功能是通过设置了一个变化系数来实现的，这个变化系数就是拖动位置之间的距离（两点之间距离的计算公式），放大是transform: scale，只需要通过变化系数来修改scale，比如scale = (元素宽度 + 变化系数) / 元素宽度，或者其他的计算方式也可以，只要是添加了跟移动位置相关的变化系数，那么scale的值就可以按一定规律变化，就能实现放大的动画功能。展开评论1 - #青训营笔记创作活动#
1月15日 Day2
今天是记录一些前端开发中一些好用的网站
1.GitHub Desktop
git可视化工具，方便git命令的查找
2.tintpng
前端离不开图片，一个很好用的在线压缩网站，文件大的话可以用squoosh
3.码上掘金
很方便的在线代码编辑网站
4. Json.cn
在线格式化JSON
5. carbon
方便写笔记或者写文档的时候记录代码
6.emojiall
各种表情符号，颜文字的收录
7. iconfont
阿里巴巴推出的字体图标库，支持自定义图标库
8.surge
一个免费的部署网站，可以通过这个来自己部署一个网站。展开评论1