nuxt.js + vuedraggable 拖拽效果

nuxt.js + vuedraggable 拖拽效果

项目需求:要求列表中实现拖拽效果 从而实现优先级的分布
效果图如下:

实现步骤:主要分为4个步骤
步骤1: 下载所需依赖

npm install vue-draggable

步骤2: 所需页面中调用

import draggable from “vuedraggable”;

步骤3:template布局中使用

 <draggable
     v-model="articleLists"
     class="dragItem_group"
     group="site"
     animation="300"
     dragClass="dragClass"
     ghostClass="ghostClass"
     chosenClass="chosenClass"
     @start="onStart"
     @end="onEnd"
     >
      <transition-group>
          <div
            class="article-li-card-div"
            :class="item.isChecked == true ? 'select_border' : ''"
             v-for="item in articleLists"
             :key="item.articleId"
              >
               // 内容列表部分     
           </div>
       </transition-group>
  </draggable>

步骤4:methods使用调用方法(业务逻辑)

//开始拖拽事件
// 
onStart(evt) {
console.log(evt); 
this.isDrag = true;
},
//拖拽结束事件
onEnd(evt) {
console.log(evt);
this.isDrag = false;
}

控制台打印的值:

📢没了，结束了，如有错误，欢迎留言.如有问题，不吝赐教。
📢如果此篇博文对您有帮助，还请动动小手点赞 👍 收藏 ⭐留言 📝呐~，谢谢 ~ ~