vue使用vuedraggable插件实现拖拽效果

 更新时间:2024年04月01日 10:16:41   作者:鱼干~  
这篇文章主要介绍了vue使用vuedraggable插件实现拖拽效果,本文分步骤介绍了安装vuedraggable插件的方法及页面引入的方法,需要的朋友可以参考下

技术
ant design vue1.7.8 的UI框架、
vue2.x版本

场景:需要实现div拖拽的效果

效果图:

第一步:安装vuedraggable插件

//npm方式安装
npm i -S vuedraggable
//或使用yarn安装
yarn add vuedraggable

第二步:在页面引入组件 script代码块里

<script>
//第一步 ***.引入组件
import draggable from 'vuedraggable'
export default {
  components: {
    draggable, //***.第二步 
  },
  data() {
    return {
      tagsList: [],
      treeClass: '',
      classList: [],
      checkedCategoryKeys: [],
      categoryTree: [],
      defaultProps: {
        children: 'subGroupList',
        title: 'groupName',
        key: 'groupCode',
      },
      eventSelectedNode: null,
      isLoading: false,
    }
  },
  created() {
    this.load_init()
  },
  methods: {
    //拖拽动作   ***.第三步 拖拽完成事件
    onDraggableUpdate(e) {
      this.isLoading = true
      setTimeout(() => {
        this.isLoading = false
        //老位置
        const oldIndex = e.oldIndex
        //新位置
        const newIndex = e.newIndex
        const newSort = this.tagsList[e.newIndex].sort
        this.tagsList[e.newIndex].sort = this.tagsList[e.oldIndex].sort
        this.tagsList[e.oldIndex].sort = newSort
        console.log(this.tagsList)
        this.$message.success('顺序变更成功!')
      }, 1000)
    },
    //初始化
    load_init() {
      for (let index = 0; index < 98; index++) {
        this.classList.push({
          value: 'val' + index,
          label: '树层级_' + index,
        })
        this.tagsList.push({
          value: 'val' + index,
          label: '树层级_' + index,
          //是否编辑
          isEditName: false,
          //排序
          sort: index,
          //loading
          isLoading: false,
        })
      }
    },
  },
}
</script>

template代码块

      <div class="bodyRight">
        <div class="bodyRightTitle">
          <div><span>标签池</span></div>
          <div><a-button type="primary">导入Excel</a-button></div>
        </div>
        <div class="bodyRightLabel">
          <a-spin :spinning="isLoading">
          <!-- ***.下面是第四步 -->
            <draggable
              v-model="tagsList"
              class="bodyRightdraggable"
              @sort="onDraggableUpdate"
              animation="300"
              chosenClass="chosen"
            >
              <transition-group v-for="item in tagsList" :key="item.value">
                <a-tag
                  class="tabs"
                  :key="item.value"
                  @close="deleteTag(item)"
                  style="margin-bottom: 5px"
                  @dblclick="handleDblClick(item)"
                >
                  <span class="a-select__tags-text tagname" v-if="!item.isEditName">
                    <CEllipsis :length="8" :tooltip="true">
                      {{ item.label }}
                    </CEllipsis>
                    <div title="删除"><a-icon type="close" @click.stop="removeLabel(item)" /></div>
                  </span>
                  <a-input
                    v-else
                    :ref="'input_' + item.value"
                    v-model="item.label"
                    :maxLength="22"
                    @pressEnter="sumbitLabel(item)"
                    placeholder="请输入标签名称"
                    @blur="sumbitLabel(item)"
                  ></a-input>
                </a-tag>
              </transition-group>
            </draggable>
          </a-spin>
        </div>
      </div>

style代码块

    .bodyRight {
      width: 65%;
      height: 100%;
      .bodyRightTitle {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 10px;
        line-height: 18px;
      }
      .bodyRightLabel {
        width: 100%;
        height: 90%;
        overflow-y: auto;
        border: 2px solid #d9d9d9;
        border-radius: 4px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-content: flex-start;
        .bodyRightdraggable {
          display: flex;
          flex-wrap: wrap;
          padding: 10px;
        }
        .tabs {
          width: 125px;
          height: 35px;
          border: 1px dashed #ccc;
          border-radius: 25px;
          font-size: 16px;
          align-items: center;
          display: flex;
          cursor: pointer;
          .tagname {
            width: 100%;
            display: flex;
            justify-content: space-between;
          }
          i {
            display: none;
          }
          &:hover {
            i {
              font-size: 16px;
              color: red;
              display: inline-block;
            }
          }
        }
        //***.第五步 样式
        .chosen {
          .tabs {
            border: 1px solid #1890ff;
            background-color: #fff !important;
            color: #1890ff;
            cursor: move;
          }
        }
      }
    }

注意点:

1.我的vuedraggable版本是2.24.3
2.官网文档地址:https://www.itxst.com/vue-draggable/tutorial.html

到此这篇关于vue使用vuedraggable插件实现拖拽效果的文章就介绍到这了,更多相关vue vuedraggable拖拽内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • VUE实现吸底按钮

    VUE实现吸底按钮

    这篇文章主要为大家详细介绍了VUE实现吸底按钮,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-03-03
  • Nuxt3+ElementPlus构建打包部署全过程

    Nuxt3+ElementPlus构建打包部署全过程

    网上大部分关于Nuxt打包部署教程可谓是可以用五花八门来形容,这对于第一次接触的朋友简直是无从下手,这篇文章主要给大家介绍了关于Nuxt3+ElementPlus构建打包部署的相关资料,需要的朋友可以参考下
    2023-01-01
  • vue使用input封装上传文件图片全局组件的示例代码

    vue使用input封装上传文件图片全局组件的示例代码

    实际开发过程中,我们经常遇见需要上传文件图片功能,可以封装一个全局组件来调用,这篇文章给大家介绍vue使用input封装上传文件图片全局组件,感兴趣的朋友跟随小编一起看看吧
    2023-11-11
  • vue左右侧联动滚动的实现代码

    vue左右侧联动滚动的实现代码

    这篇文章主要介绍了vue左右侧联动滚动的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • 关于Vue实现组件信息的缓存问题

    关于Vue实现组件信息的缓存问题

    这篇文章主要介绍了关于Vue实现组件信息的缓存问题的相关资料,需要的朋友可以参考下
    2017-08-08
  • 解决vue 中 echart 在子组件中只显示一次的问题

    解决vue 中 echart 在子组件中只显示一次的问题

    vue推荐组件化开发,所以就把每个图表封装成子组件,然后在需要用到该图表的父组件中直接使用。接下来给大家介绍vue 中 echart 在子组件中只显示一次的问题,需要的朋友参考下吧
    2018-08-08
  • vue如何遍历data所有变量并赋值

    vue如何遍历data所有变量并赋值

    这篇文章主要介绍了vue如何遍历data所有变量并赋值,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue+el-table点击表头实现改变其当前样式

    vue+el-table点击表头实现改变其当前样式

    这篇文章主要介绍了vue+el-table点击表头实现改变其当前样式问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • vue中如何解除数据之间的双向绑定

    vue中如何解除数据之间的双向绑定

    这篇文章主要介绍了vue中如何解除数据之间的双向绑定,具有很好的参考价值,希望对
    2022-09-09
  • element-ui在table中如何禁用其中几行

    element-ui在table中如何禁用其中几行

    这篇文章主要介绍了element-ui在table中如何禁用其中几行问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10

最新评论