最近看见一个拖拽效果的视频，看好多人说跟着敲也没效果，本着知其然必要知其所以然的心理，我把实现效果研究了一遍，并且了解了其实现原理，这里给大家复盘其原理，学到就是赚到。

准备

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

• 找到需要的图标，添加进项目
• 找到图标所在的项目，点击查看链接
• 复制地址，或者点击地址复制跳转后地址链接

创建所需要结构

把我们需要结构先写出来

• 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;
}