博客

Cannot read property ‘header’ of undefined

这个问题是draggable的版本不对，我换为

"vuedraggable": "^4.1.0"

这个版本就好了


ps: vue2.0和vue3.0 draggable用法不一样


安装

npm i vuedraggable@4.1.0 --save 或 yarn add vuedraggable@4.1.0

使用

<template>
  <div class="drag-box">
    <Draggable
      :list="list"
      :animation="100"
      item-key="id"
      class="list-group"
      :forceFallback="true" // ===设置为true时拖拽才能滚动====
      ghost-class="ghost"
      @change="onMoveCallback"
    >
      <template #item="{ element }">
        <div class="items">
          <div class="title">{{ element.label }}</div>
          <button @click.stop="fold(element)">{{element.isflod ? '展开' : '收起'}}</button>
        </div>
      </template>
    </Draggable>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import Draggable from 'vuedraggable'

export default {
  components: {
    Draggable
  },
  setup() {
    const list = ref([
      {
        label: '模块1',
        id: 1,
        isflod: false
      },
      {
        label: '模块2',
        id: 2,
        isflod: false
      },
      {
        label: '模块3',
        id: 3,
        isflod: false
      },
      {
        label: '模块4',
        id: 4,
        isflod: false
      },
      {
        label: '模块5',
        id: 5,
        isflod: false
      },
      {
        label: '模块6',
        id: 6,
        isflod: false
      },
    ])
    

    const onMoveCallback = (val) => {
      console.log(val, 'move==================')
    }

    const fold = (val) => {
      val.isflod = !val.isflod
    }
    return {
      list,
      fold,
      onMoveCallback
    }
  }
}
</script>

<style lang="less"  scoped>
  .drag-box{
    .items{
      display: flex;
      justify-content: space-between;
      width: 100%;
      padding: 20px;
      margin-bottom: 20px;
      background: #e3e3e3;
      border-radius: 8px;
    }
  }
</style>

效果图

部分Draggable API （转）

 group: "name",  // or { name: "...", pull: [true, false, clone], put: [true, false, array] } name相同的组可以互相拖动
 sort: true,  // 内部排序列表
 delay: 0, // 以毫秒为单位定义排序何时开始。
 touchStartThreshold: 0, // px,在取消延迟拖动事件之前，点应该移动多少像素?
 disabled: false, // 如果设置为真，则禁用sortable。
 store: null,  // @see Store
 animation: 150,  // ms, 动画速度运动项目排序时，' 0 ' -没有动画。
 handle: ".my-handle",  // 在列表项中拖动句柄选择器。
 filter: ".ignore-elements",  // 不导致拖拽的选择器(字符串或函数)
 preventOnFilter: true, // 调用“event.preventDefault()”时触发“filter”
 draggable: ".item",  // 指定元素中的哪些项应该是可拖动的。
 ghostClass: "sortable-ghost",  // 设置拖动元素的class的占位符的类名。
 chosenClass: "sortable-chosen",  // 设置被选中的元素的class
 dragClass: "sortable-drag",  //拖动元素的class。
 dataIdAttr: 'data-id',
 forceFallback: false,  // 忽略HTML5的DnD行为，并强制退出。（h5里有个属性也是拖动，这里是为了去掉H5拖动对这个的影响
 fallbackClass: "sortable-fallback",  // 使用forceFallback时克隆的DOM元素的类名。
 fallbackOnBody: false,  // 将克隆的DOM元素添加到文档的主体中。（默认放在被拖动元素的同级）
 fallbackTolerance: 0, // 用像素指定鼠标在被视为拖拽之前应该移动的距离。
 scroll: true, // or HTMLElement
 scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... }
 scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
 scrollSpeed: 10, // px

参考链接

1. https://stackoverflow.com/questions/68040058/draggable-element-must-have-an-item-slot
2. https://blog.csdn.net/weixin_47180815/article/details/109841448