网站建设的目标客户,东莞常平做网站公司,python 网站架构,seo自动优化工具这里给大家分享我在网上总结出来的一些知识#xff0c;希望对大家有所帮助 前言 最近看见一个拖拽效果的视频(抖音#xff1a;艾恩小灰灰)#xff0c;看好多人评论说跟着敲也没效果#xff0c;还有就是作者也不回复大家提出的一些疑问#xff0c;本着知其然必要知其所以然… 这里给大家分享我在网上总结出来的一些知识希望对大家有所帮助 前言 最近看见一个拖拽效果的视频(抖音艾恩小灰灰)看好多人评论说跟着敲也没效果还有就是作者也不回复大家提出的一些疑问本着知其然必要知其所以然的心理我把实现效果研究了一遍并且了解了其实现原理这里给大家复盘其原理学到就是赚到 准备 这里我们要用到字体图标所以我们从iconfont阿里图标库直接引入 找到需要的图标添加进项目找到图标所在的项目点击查看链接复制地址或者点击地址复制跳转后地址链接 link relstylesheet hrefhttps://at.alicdn.com/t/c/font_2579455_c6xlnvkj0j.cssspma313x.7781069.1998910419.53filefont_2579455_c6xlnvkj0j.css创建所需要结构 把我们需要结构先写出来 draggable:让盒子可以进行拖拽style--color:#e63e31--color让盒子背景色根据--color显示(与下方css样式相联系) div classlistdiv classlist-item draggabletrue style--color:#e63e31i classiconfont icon-shuangyuzuo constellation/ispan classlist-item-title双鱼座/span/divdiv classlist-item draggabletrue style--color:#70d265i classiconfont icon-shuipingzuo constellation/ispan classlist-item-title水平座/span/divdiv classlist-item draggabletrue style--color:#f0e941i classiconfont icon-mojiezuo constellation/ispan classlist-item-title摩羯座/span/divdiv classlist-item draggabletrue style--color:#da8218i classiconfont icon-chunvzuo constellation/ispan classlist-item-title处女座/span/divdiv classlist-item draggabletrue style--color:#7ff0eci classiconfont icon-shizizuo constellation/ispan classlist-item-title狮子座/span/div/div编写样式 这里直接采用flex对盒子进行排版布局 background-color: var(--color);var(--color)是或者自定义属性的颜色 body{background-color: #000;
}
.list{width: 300px;height: 360px;/* padding: 20px 0; */margin: 100px auto 0;display: flex;flex-direction: column;justify-content: space-around;
}
.list-item{width: 100%;display: flex;align-items: center;padding: 0 16px;border-radius: 10px;/* margin-bottom: 20px; */
background-color: var(--color);
}
.constellation{line-height: 2.5em;font-size: 20px;color: #fff;
}
.list-item-img{width: 30px;height: 30px;
}
.list-item-title{margin-left: 20px;color: #fff;
}
// 移动动画class
.list-item.moving{
background-color: transparent;
border: 2px dashed #ccc;
}js编写拖拽效果 首先获取需要用到的元素 // 获取整个list
const list document.querySelector(.list)
// 获取每一个盒子
const item document.querySelectorAll(.list-item)开始拖动的时候需要加上移动的类并且设置移动效果 // 开始拖动list.ondragstart e {source_node e.targetrecode(item)setTimeout(() {// 拖拽时样式e.target.classList.add(moving)}, 0)// 设置拖动效果e.dataTransfer.effectAllowed move}拖拽中需要判断是从上往下还是从下往上根据拖拽元素和放入元素的索引进行比对从而对拖拽元素进行插入节点操作 注意 在码上掘金从上往下的时候会出现bug在浏览器不会我个人觉得应该是是码上掘金的问题 // 拖拽放入有效目标触发list.ondragenter e {e.preventDefault()console.log(e.target.id, list)if (e.target list || e.target source_node) {return false}const childer Array.from(list.children)const sourceIndex childer.indexOf(source_node)const targetIndex childer.indexOf(e.target)// console.log(sourceIndex, targetIndex)if (sourceIndex targetIndex) {// 从下往上拖动list.insertBefore(source_node, e.target.nextElementSibling)} else {// 从上往下拖动list.insertBefore(source_node, e.target)}// 动画效果函数last([e.target, source_node])}拖拽结束后把拖拽时的样式移除 // 拖放结束list.ondragend e {e.target.classList.remove(moving)}解释方法 这里有好多没有用过或者比较少用的方法这里给大家解释一下 ondragstart:当用户开始拖动一个元素或文本选择时会触发dragstart事件ondragover:当元素或文本选择被拖到有效的拖放目标上时(每几百毫秒一次)就会触发拖放事件ondragenter:当被拖动的元素或文本选择进入有效的拖放目标时会触发dragenter事件ondragend: 当拖放操作结束时(通过释放鼠标按钮或点击escape键)触发dragend事件。e.dataTransfer.effectAllowed:用于设置拖放时的效果常用参数有(move,link,copy)getBoundingClientRect:返回元素对于视口的信息requestAnimationFrame:重绘动画cancelAnimationFrame用于取消requestAnimationFrame调用请求 所有代码 HTML div classlistdiv classlist-item draggabletrue style--color:#e63e31 i classiconfont icon-shuangyuzuo constellation/ispan classlist-item-title双鱼座/span/divdiv classlist-item draggabletrue style--color:#70d265 i classiconfont icon-shuipingzuo constellation/ispan classlist-item-title水平座/span/divdiv classlist-item draggabletrue style--color:#f0e941 i classiconfont icon-mojiezuo constellation/ispan classlist-item-title摩羯座/span/divdiv classlist-item draggabletrue style--color:#da8218 i classiconfont icon-chunvzuo constellation/ispan classlist-item-title处女座/span/divdiv classlist-item draggabletrue style--color:#7ff0ec i classiconfont icon-shizizuo constellation/ispan classlist-item-title狮子座/span/div
/divJS // 操作dom元素const list document.querySelector(.list)const item document.querySelectorAll(.list-item)// 判断当前元素let source_node// 开始拖动list.ondragstart e {source_node e.targetrecode(item)setTimeout(() {e.target.classList.add(moving)}, 0)// 设置拖动效果e.dataTransfer.effectAllowed move}// 拖动在有效目标list.ondragover e {// 防止默认情况下允许删除e.preventDefault()}// 拖拽放入有效目标触发list.ondragenter e {e.preventDefault()console.log(e.target.id, list)if (e.target list || e.target source_node) {return false}const childer Array.from(list.children)const sourceIndex childer.indexOf(source_node)const targetIndex childer.indexOf(e.target)console.log(sourceIndex, targetIndex)if (sourceIndex targetIndex) {// 从下往上拖动// console.log(source_node,e.target.nextElementSibling)// if()list.insertBefore(source_node, e.target.nextElementSibling)} else {// 从上往下拖动console.log(e.target,e.target)if (!e.targetnull||source_nodenull) {return}list.insertBefore(source_node, e.target)}last([e.target, source_node])}// 拖放结束list.ondragend e {e.target.classList.remove(moving)}// 重新计算位置function recode(eleAll) {// getBoundingClientRect 返回元素对于视口信息for (let i 0; i eleAll.length; i) {const {top,left} eleAll[i].getBoundingClientRect()eleAll[i]._top topeleAll[i]._left left}}// 添加移动动画效果function last(eleAll) {for (let i 0; i eleAll.length; i) {const dom eleAll[i]const {top,left} dom.getBoundingClientRect()if (dom._left) {dom.style.transform translate3d(${dom._left-left}px,${dom._top-top}px,0px)// 重绘动画let rafId requestAnimationFrame(function () {dom.style.transition transform 0.3s ease-outdom.style.transform none})dom.addEventListener(transitionend, () {dom.style.transition none// 取消requestAnimationFrame调用请求cancelAnimationFrame(rafId)})}}}CSS body{background-color: #000;
}
.list{width: 300px;height: 360px;/* padding: 20px 0; */margin: 100px auto 0;display: flex;flex-direction: column;justify-content: space-around;
}
.list-item{width: 100%;display: flex;align-items: center;padding: 0 16px;border-radius: 10px;/* margin-bottom: 20px; */
background-color: var(--color);
}
.constellation{line-height: 2.5em;font-size: 20px;color: #fff;
}
.list-item-img{width: 30px;height: 30px;
}
.list-item-title{margin-left: 20px;color: #fff;
}
.list-item.moving{
background-color: transparent;
border: 2px dashed #ccc;
}本文转载于: https://juejin.cn/post/7171269067729272868 如果对您有所帮助欢迎您点个关注我会定时更新技术文档大家一起讨论学习一起进步。
