前端实用笔记

105 阅读1分钟

1.聚焦输入框实现下拉列表:

可以使用max-height:300px

或者用js获取高度auto,拿到offsetHeight,在设置transition=1s

2.跨域问题:

解决方案: cors: 跨域资源共享,设置access-control-allow-origin

3.形参数量: 例如:函数A(a,b),B(a,b=1),C(a,...args)

打印A。B.C的length时候,是2,1,1

原因是:length表达的是 它期望的最少参数个数

4,实现拖拽排序:

首先拖动:h5的api:在元素上添加属性 draggable=true

拖动虚线样式:.moving:{

background:transparent;color:transparent;boder:1px dashed #ccc

}

然后监听父元素: let source ; list.ondragstart = e =>{ setTimeout(()=>{ e.target.classList.add("moving") },0) source = e.target e.dataTransfer.effectAllowed='move' //设置鼠标为移动而不是复制 }

拖动后排序:

list。ondragenter=e=>{ if(e.target === list || e.target ===source){ return ; } }} const children = Array.from(list.children) const index = children.indexOf(source) const target = chjildren.indexOf(e.target) if(index<target){ list.insertBefore(source,e.target.nextElementSiblinh) }else{ list.insertBefore(source,e.target) }

拖拽完成: list.ondragend=(e)=>{ e.target.classList.remove("moving") }

同时,设取消拖拽的时候复原: list.ondragenter=(e)=>{e>preventDefault()} list.ondragover=(e)=>{e>preventDefault()}