记录H5 C3的一些奇淫技巧

关于flex布局

1. 项目经常遇到 上下固定中间自适应剩余高度的场景 如果中间的盒子用了 flex:1; 会遇到 中间盒子由于没有设置固定高而被子元素撑大的情况， 然后overflow: auto; 也失效了

• 解决：

flex: 1; height: 0;

2. 还有一个场景是，上下固定，中间自适应，中间超出部分自滚动。如果中间的内容不够撑开全部剩余的高度，那么就默认用内容的高，如果中间内容的高度超出剩余高度，就用最大剩余的高度并且超出自滚动；

flex: 1;
max-height: fit-content;
overflow: auto;

---

拖拽 draggable='true'

dragenter

• 如果目标元素里面有其他的元素 dragenter 会被多次触发 例如目标元素是下面的层级关系

<div>
    <span>首页</span>
</div>

• 当拖拽元素进入这个div的时候，dragenter和dragleave分别触发了两次
• 原因就是因为div里面有个span

进入目标元素，想让其只执行一次dragenter dragleave里面的内容怎么办？解决如下

let enterTimes = 0
dragenter() {
    enterTimes++
  // 可用enterTimes和e.target.tagName共同判断去做一些事
}
dragleave() {
    enterTimes--
    if (enterTimes <= 0) {
        // do something
    }
}

注意要在 drop dragend 里面重置 enterTimes 为 0