拖拽页面元素+flip动画的案例

先上效果：

实现思路和流程：

基础页面布局给每个拖动元素加上 draggable="true"
ondragstart(开始拖动某个元素时)做出对应的处理获得操作的具体元素给目标元素添加对应的样式显示透明增加虚线描边
ondragover 被拖动的元素hover到目标元素上时触发阻止默认事件-默认不让元素拖动到自身
ondragenter 拖动进行当中对比当前拖动的元素和正在覆盖元素的索引来判断操作是上升还是下降
ondragend 在结束时样式由内部透明虚线转为原来的样子
配置flip动画

基础页面布局：

<div class="list">
  <div draggable="true" class="list_item">1</div>
  <div draggable="true" class="list_item">2</div>
  <div draggable="true" class="list_item">3</div>
  <div draggable="true" class="list_item">4</div>
  <div draggable="true" class="list_item">5</div>
</div>

<style>
    .list{
      width: 750px;
      margin: 40px auto;
    }
    .list_item{
      width: 100%;
      border-radius: 8px;
      height: 52px;
      margin-bottom: 12px;
      background: rgba(40,142,145,0.9);
      color: white;
      line-height: 52px;
      padding-left: 16px;
      font-size: 18px;
      box-sizing: border-box;
      cursor: move;
      /*user-select: none;*/
    }
    .moving{
      background: transparent;
      color: transparent;
      border: 1px  dashed #ccc;
    }
</style>

实现拖动步骤

获取到总的外容器 便于下面事件委托
const list = document.querySelector('.list')
获取到所有可拖动的元素 用于记录起始位置
const item = document.querySelectorAll('.list_item')
let  sourceNode;  判断当前拖动的是哪个元素
 开始拖动的事件
list.ondragstart = e =>{
  sourceNode = e.target
  record(item)  传入item 记录起始位置
  setTimeout(()=>{
    e.target.classList.add('moving')
  },0)
  e.dataTransfer.effectAllowed = 'move'
}
list.ondragover = e => {
  e.preventDefault()
}
 拖动进行中的事件
list.ondragenter = e =>{
  e.preventDefault()
   托回到原来的位置了就什么也不做
  if(e.target === list || e.target === sourceNode){
    return false
  }
  const children = Array.from(list.children)
  const sourceIndex = children.indexOf(sourceNode)  当前劫持元素的索引值
  const targetIndex = children.indexOf(e.target)   覆盖到谁上面的索引值
  if(sourceIndex < targetIndex){
       父节点.insertBefore(要插入的节点，在谁前面) 从下向上拖动
    list.insertBefore(sourceNode,e.target.nextElementSibling)
  }else {
    list.insertBefore(sourceNode,e.target)
  }
  last([e.target,sourceNode]) 传入改变位置的两个元素 比较差异 执行filp动画
}
 拖动结束的时候取消虚线
list.ondragend = e =>{
  e.target.classList.remove('moving')
}

filp动画的函数

// 记录初始位置
function record(eleAll) {
  for( let i = 0;i < eleAll.length; i++ ) {
    const { top,left } = eleAll[i].getBoundingClientRect()
    eleAll[i]._top_ = top
    eleAll[i]._left_ = left
  }
}

/*  getBoundingClientRect()用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗(可视范围不包含卷去的部分)的位置。*/
/**
 * requestAnimationFrame 比起 setTimeout、setInterval的优势主要有两点：
 1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。
 2、在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。

 取消：cancelAnimationFrame(Id)

 * **/






// 记录最后的位置 并且执行动画
function last(eleAll) {
  for( let i = 0;i < eleAll.length; i++ ) {
    const dom = eleAll[i]
    const { top,left } = dom.getBoundingClientRect()
    // 新增dom时，逻辑应为 原有dom后移动，新增dom不动，故记录了位置的才添加动画 确定上一步有记录起始位置再进行下一步
    if(dom._left_) {
      // 恢复至开始位置
      dom.style.transform = `translate3d(${ dom._left_ - left }px, ${ dom._top_ - top }px,0px)`
      // play 过程，移除开始位置的设置，添加过渡
      let rafId = requestAnimationFrame(function() {
        //启用tansition，并移除翻转的改变  可以内置样式也可以用 外部类
         //dom.classList.add('active')
        dom.style.transition = 'transform 300ms ease-out'
        dom.style.transform = 'none'
      })
      dom.addEventListener('transitionend', () => {
        dom.style.transition = 'none'
         //dom.classList.remove('active')
        cancelAnimationFrame(rafId)
      })
    }
  }
}

 flip 动画思路
 f - first 记录动画开始前的位置、大小等信息 （ translateY(0px) ）
 l - last  记录动画结束时的位置、大小等信息 （ translateY(100px) ）
 i - invert 对动画前后数据信息的计算（translateY --> 100px，同时利用translate等操作，将dom恢复到 first位置）
 p - play 开始动画，并移除 i 步骤恢复至 first 的操作，启用tansition，动画就开始了

 整个过程其实就是，先记录好动画前后的dom位置等数据信息
 然后，利用css将dom恢复至初始位置
 最后，移除上一步恢复的状态（此时dom会自动回到last位置，只不过没有过渡效果，生硬的闪现），添加过渡效果，完成动画

完整代码：

const list = document.querySelector('.list')
  const item = document.querySelectorAll('.list_item')
  let  sourceNode; 

  list.ondragstart = e =>{
    sourceNode = e.target
    record(item)
    setTimeout(()=>{
      e.target.classList.add('moving')
    },0)
    e.dataTransfer.effectAllowed = 'move'
  }

  list.ondragover = e => {
    e.preventDefault()
  }


  list.ondragenter = e =>{
    e.preventDefault()
    if(e.target === list || e.target === sourceNode){
      return false
    }
    const children = Array.from(list.children)
    const sourceIndex = children.indexOf(sourceNode) 
    const targetIndex = children.indexOf(e.target) 
    if(sourceIndex < targetIndex){
      list.insertBefore(sourceNode,e.target.nextElementSibling)
    }else {
      list.insertBefore(sourceNode,e.target)
    }
    last([e.target,sourceNode])
  }

  list.ondragend = e =>{
    e.target.classList.remove('moving')
  }


function record(eleAll) {
  for( let i = 0;i < eleAll.length; i++ ) {
    const { top,left } = eleAll[i].getBoundingClientRect()
    eleAll[i]._top_ = top
    eleAll[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 300ms ease-out'
        dom.style.transform = 'none'
      })
      dom.addEventListener('transitionend', () => {
        dom.style.transition = 'none'
        cancelAnimationFrame(rafId)
      })
    }
  }
}

拖拽页面元素+flip动画的案例

基础页面布局：

实现拖动步骤

完整代码：

猜你喜欢