IFE task0002_5 回顾

Thu Apr 23, 2020

做这个任务的时候我一度想要放弃。因为基础不牢，觉得这东西对我来说有点难啊。结果磕磕绊绊借鉴DIYgod的网页做出来之后，发现这东西真tm是基础。

我也百度了一下，发现写task0002_5的博客少之又少，说明ife的任务2到这里，基本上已经没有很多人在做了。

瞎总结

首先要了解事件是个什么东西。在这个任务里面，要监听的是

而在js里，有专门针对拖动的监听事件*dragStart*和*drop*方法。

首先要给滑块设置draggable=true，然后就会神奇得发现滑块真的可以拖动了。留下一个残影在原来的位置。但是也会神奇得发现鼠标一松开还是要打回原形。

先做第一个动画，拖动一个滑块A的时候，首先A要在wrap中消失。可以用css添加一个class dragging，设置display=none。监听滑块处在拖动的状态时，就是不可见的。而一旦落了脚，要移除这个class。重新回到可见状态。

第一个动画做完，可以发现，拖动A，A下面的滑块会自动补上A的位置。松开鼠标依旧打回原形。

然后尝试做单个容器内滑块的拖动效果。第二个动画该考虑把要移动的滑块A插到合适的地方。这里面有这样几步

我在这里偷了个懒，仅根据drop事件当前的鼠标位置来判断插入哪一格。具体细节先不追究，毕竟还要抓紧学vue的知识。2、3步也比较简单，让每个滑块position=absolute，然后设置一个top值，就可以控制滑块的移动了。

最后将单容器拓展到双容器甚至多容器，其实仅比单容器多了一步，就是根据滑块drop的中心位置判断落在哪个容器。

我写回顾主要是想记一下自己踩的坑。

$.on(document.body, 'dragover', dragOver);

没错，全在这一行代码里了。

$.on是util.js里addEvent(element, event, listener)的封装。

element，就是监听对象。我在做drop效果的时候，打死都出不来。随便一拖动，滑块就没了。最后定位到是element的问题，我打开html检查器，发现自己没有定义container的高度，结果就是整个body只有一丢丢高，并没有把容器包括进去。所以我拖动的滑块，其实在监听对象body之外。那肯定是没得效果咯。
event，这…我本来以为没啥实际意义的参数，又给我栽一大跟头，让我不好好看文档先学习用法。event要和listener方法名一致，并且全部小写。
dragOver别看就一行代码，e.preventDefault();，这是为了防止浏览器拖动结束没来得及drop就结束监听。不然又会遇到一拖动滑块就消失了的情况。

以上。