Vue3中简单使用vuedraggable拖拽

一、安装引入

npm i vuedraggable@4.1.0 --save

import Draggable from 'vuedraggable';

二 、使用

<template>
  <button @click="submit">提交数据</button>
  <div class="drag-box">
    <Draggable
      v-model="tags"
      :list="list"
      :animation="100"
      item-key="id"
      class="list-group"
      :forceFallback="true"
      ghost-class="ghost"
      @change="onMoveCallback"
      :move="getdata"
    >
      <template #item="{ element }">
        <div class="items">
          <div class="title">{{ element.label }}</div>
        </div>
      </template>
    </Draggable>
  </div>
</template>

<script lang="ts">
import { reactive} from 'vue';
import Draggable from 'vuedraggable';
export default {
  components: {
    Draggable,
  },
  setup() {
    let list = reactive([
      {
        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.moved.newIndex);
      console.log('拖动后的索引 :' + val.moved.oldIndex);
    };
    const getdata = (val) => {
      console.log(val.draggedContext.element.id);
    };
    // 查看最新的数据
    const submit = () => {
      console.log(list);
    };
    // watch(
    //   list,
    //   (newValue, oldValue) => {
    //     console.log('list', newValue, oldValue);
    //   },
    //   { immediate: true }
    // );
    return {
      list,
      onMoveCallback,
      getdata,
      submit,
    };
  },
};
</script>

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

三、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