在弹窗里实现排序及拖拽功能

最新推荐文章于 2024-05-29 11:25:10 发布

悲伤小海鸥

最新推荐文章于 2024-05-29 11:25:10 发布

阅读量366

点赞数

分类专栏： web前端文章标签：前端 vue.js typescript

本文链接：https://blog.csdn.net/m0_65849649/article/details/126002332

版权

本文介绍了如何在前端项目中，特别是在Vue.js结合Typescript的弹窗组件内，利用Sortable.js实现元素的排序和拖放功能。通过示例代码，详细展示了在后台管理场景下这一功能的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Sortable.js中文网 (sortablejs.com)

在写后台管理项目时，我们会在弹窗里实现一些排序及拖拽的功能，这个插件库可以满足你的需求，下面是我写过在弹窗里实现排序及拖拽功能的代码，分享给大家。

<div class="listbox" ref="listbox">
        <div class="box" v-for="(item, index) in pointsList" :key="index">
          <div> {
  { item._id }} </div>
          <div> {
  { item.pointName }} </div>
          <div> {
  { item.classifyId }} </div>
          <close-circle-outlined />
          <div class="deldiv" @click="deletebox(index)">+</div>
        </div>
      </div> 
// 实现拖拽排序功能
  function initSortable() {
    nextTick(() => {
      if (!listbox.value) {
        return;
      }
      Sortable.create(listbox.value, {
        sort: true,