开启成长之旅！这是我参加「日新计划 12 月更文挑战」的第4天，点击检查活动详情

前语

最近看见一个拖拽作用的视频，看很多人评论说跟着敲也没作用，还有便是作者也不回复咱们提出的一些疑问，本着知其然必要知其所以然的心思，我把实现作用研讨了一遍，而且了解了其实现原理，这儿给咱们复盘其原理，学到便是赚到

准备

这儿咱们要用到字体图标，所以咱们从iconfont阿里图标库直接引入

• 找到需求的图标，添加进项目
• 找到图标所在的项目，点击检查链接
• 仿制地址，或许点击地址仿制跳转后地址链接

<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_2579455_c6xlnvkj0j.cssspm=a313x.7781069.1998910419.53&file=font_2579455_c6xlnvkj0j.css">

创建所需求结构

把咱们需求结构先写出来

• draggable:让盒子能够进行拖拽
• style="--color:#e63e31"–color让盒子背景色依据–color显示（与下方css款式相联系）

 <div class="list">
        <div class="list-item" draggable="true" style="--color:#e63e31">
            <i class="iconfont icon-shuangyuzuo constellation"></i>
            <span class="list-item-title">双鱼座</span>
        </div>
        <div class="list-item" draggable="true" style="--color:#70d265">
            <i class="iconfont icon-shuipingzuo constellation"></i>
            <span class="list-item-title">水平座</span>
        </div>
        <div class="list-item" draggable="true" style="--color:#f0e941">
            <i class="iconfont icon-mojiezuo constellation"></i>
            <span class="list-item-title">摩羯座</span>
        </div>
        <div class="list-item" draggable="true" style="--color:#da8218">
            <i class="iconfont icon-chunvzuo constellation"></i>
            <span class="list-item-title">处女座</span>
        </div>
        <div class="list-item" draggable="true" style="--color:#7ff0ec">
            <i class="iconfont icon-shizizuo constellation"></i>
            <span class="list-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.target
        recode(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调用请求

所有代码

结尾

此次小事例主要是让咱们了解并运用draggable属性，及一些拖拽办法的学习，学到便是赚到，欢迎咱们找我沟通交流，一起学习