介绍可拖拽的组件排序

现在网上浪的人越来越在意个性化了，尤其是那种能用Vue随意拖拽组件调整顺序的功能。这篇文章就教你如何用Vue做到这一点，还有每个步骤和实操代码！

安装依赖

你想搞好那个可以乱移的组件顺序，这就得动手安装一些必要的软件包了。啥都别说了，赶紧雷厉风行地复制粘贴以下命令到终端，安装上Vue、Vue-Sortable和Sortable这些神兵利器！它们就能助你一臂之力，轻松实现拖动排序~

bash
npm install vue
npm install vue-sortable
npm install sortablejs

创建可拖拽组件

npm install vue vue-sortable sortable --save

继续聊！想做能拖着移动的组件当基本元素。就拿做任务管理 app 举例子，里头的”TaskItem”就能展现任务详情和操作任务了。然后给它加上个叫v-sortable 的指令，这样任务就可以试着拖着调整位置。

“`vue

<div v-sortable>Task Item:{{ task.title }}</div>

export default {

props:[‘task’]

}

在这段代码中，我们做了个名叫”TaskItem”的小玩意儿，这个东西能处理任务信息哟。更好玩儿的是，它还能动来动去，就因为我们给它添加了个可排序属性。

创建容器组件

  

    

      
{{ task.title }}
      
{{ task.description }}
    
  


export default {
  props: {
    task: Object
  }
}


.task-item {
  padding: 10px;
  border: 1px solid #ccc;
  background: #f9f9f9;
  cursor: move;
}
.task-content {
  margin-bottom: 10px;
}

除了单次任务的清单，我们还得做个”TaskList”箱子来管理全部的任务，把它们按顺序整齐排列。在这个箱子里面，用v-for递增，弄出很多”TaskItem”清单，然后注意看一下拖动并松手之后的变化，这样就能随心所欲调整任务的顺序了~

咱们先把那个叫“任务项”的文件从”./TaskItem.vue”那儿挪过来。

components:{

TaskItem

},

data(){

return {

tasks:[

{ id:1, title:’Task 1′},

{ id:2, title:’Task 2′},

  

    
  


import TaskItem from './TaskItem'
export default {
  components: {
    TaskItem
  },
  data() {
    return {
      tasks: [
        { id: 1, title: '任务1', description: '这是任务1的描述' },
        { id: 2, title: '任务2', description: '这是任务2的描述' },
        { id: 3, title: '任务3', description: '这是任务3的描述' },
        // 其他任务...
      ]
    }
  },
  methods: {
    onDragEnd(index) {
      // 更新任务的排序
      const [task] = this.tasks.splice(index, 1)
      this.tasks.splice(index, 0, task)
    }
  }
}


.task-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

{ id:3, title:’Task 3′}

]

}

methods:{

handleDragEnd(){

// Update tasks order here

}

搞定喽！现在我们有了个叫做“任务清单”的玩意儿，还配上了一批叫“任务项”的小配件。这个特性就是，就算你胡乱瞎滚之后，它也会自己重新排列顺序！

应用容器组件

搞定了！把容器组件装进主组件里面，然后用Vue实例渲染一下。这样，超炫的拖拽排版功能就完成了！

把那个叫做’components/TaskList.vue’的文件拷贝进来就好~

  

    
任务管理应用
    
  


import TaskList from './TaskList'
export default {
  components: {
    TaskList
  }
}


h1 {
  text-align: center;
  margin: 20px 0;
}

TaskList

搞定，现在我们掌握了Vue这个新技能，可以做出拖拽排序的功能了。试试看，只要晃一晃鼠标就能让任务项随意调整顺序，超级方便哒！

优化和定制功能

咱们这儿其实不只是基本功能，还能按你的需求去给你弄得更好一点。比如加点动画效果，设个密码锁之类的，再加上删除确认什么的，让你用起来更顺心。

结语

今天咱就说说用Vue如何搞定动态排序组件这事儿。看，我还给你准备了实际的代码示例。这样一搞，你想咋排版就咋排版，超自由灵活！希望友友们看完后能学以致用，把这个功能加到自己的项目中，让用户们乐在其中～。