今天通过插件主要完成了模块的左右移动
以下是demo案例,可以实现上下移动以及左右移动
这个插件非常的好用，具有参考价值
https://bevacqua.github.io/dragula/

<template>
  <div>
    <div class='parent'>
    <div class='wrapper'>
      <div id='left-lovehandles' class='container'  ref="d1">
        <div><span class='handle'>+</span>1</div>
        <div><span class='handle'>+</span>2</div>
      </div>
      <div id='right-lovehandles' class='container' ref="d2">
        <div><span class='handle'>+</span>3</div>
        <div><span class='handle'>+</span>4</div>
      </div>
    </div>
  </div>
  </div> 
</template>
<script>
import dragula from 'dragula'
import '../dragula/dragula.js'
import '../dragula/dragula.css'
export default{
  mounted(){
    function $ (id) {
     return document.getElementById(id);
    }
   dragula([$('left-lovehandles'), $('right-lovehandles')], {
     moves: function (el, container, handle) {
       return handle.classList.contains('handle');
      }
   });
  }
}
</script>

用在项目中的时候，需要改变的只是类名而已,我在项目当中使用的时候，会纠结到父子级的问题，其实不用，下图的js-move类名其实就是需要移动的模块类名，直接获取就可以 不用考虑传值等问题

mounted(){
        dragula([document.getElementById('js-left'),document.getElementById('js-right')],
            {
                moves:function(el,container,handle){
                    return handle.classList.contains('js-move');
                }
            }
        )
    }

问题
下面需要完成的是如何判断左右移动规则的条件，以及一些
隐藏头像，头像下面的内容需要上移，姓名的左移
这些应该是需要去写一个判断条件的