快捷導(dǎo)航

vue使用vuedraggable插件實現(xiàn)拖拽效果

更新時間：2024年04月01日 10:16:41 作者：魚干～

這篇文章主要介紹了vue使用vuedraggable插件實現(xiàn)拖拽效果,本文分步驟介紹了安裝vuedraggable插件的方法及頁面引入的方法,需要的朋友可以參考下

第一步：安裝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">導(dǎo)入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;
          }
        }
      }
    }