用于拖放的 vue 库 - vue-dndrop

用于拖放的 vue 库 - vue-dndrop
插件名称 vue-dndrop
发布时间 2021年8月18日
插件作者 amendx

一个快速、轻量级的拖放、可排序的 Vue.js 库,具有许多配置选项,涵盖了许多 d&d 场景。

这个库包含一个 Vue.js 组件的包装器,它覆盖了长期缺失的smooth-dnd库。为了减少importee,我将所有需要的内容从smooth-dnd我们自己的库中移走了。现在都是普通的js。

安装

npm i vue-dndrop

视图

<template>
  <div>
    <div class="simple-page">
        <Container @drop="onDrop">
          <Draggable v-for="item in items" :key="item.id">
            <div class="draggable-item">
              {{item.data}}
            </div>
          </Draggable>
        </Container>
    </div>
  </div>
</template>

<script>
import { Container, Draggable } from "vue-smooth-dnd";
import { applyDrag, generateItems } from "./utils";
export default {
  name: "Simple",
  components: { Container, Draggable },
  data() {
    return {
      items: generateItems(50, i => ({ id: i, data: "Draggable " + i }))
    };
  },
  methods: {
    onDrop(dropResult) {
      this.items = applyDrag(this.items, dropResult);
    }
  }
};
</script>

属性

属性定义了库的视觉行为:

属性类型默认描述
:orientationstringvertical容器的方向。可以是水平的垂直的
:behaviourstringmove描述拖动项目将被移动或复制到目标容器的天气的属性。可以是movecopydrop-zonecontains
:tagstring or NodeDescriptiondiv请参阅下面的说明
:group-namestringundefinedDraggables 可以在具有相同组名的容器之间移动。如果未设置容器将不接受来自外部的拖动。这种行为可以被 shouldAcceptDrop 函数覆盖。见下文。
:lock-axisstringundefined锁定拖动的移动轴。可能的值为xyundefined
:drag-handle-selectorstringundefined用于测试启用拖动的 CSS 选择器。如果没有给定的项目,可以从其边界的任何地方抓取。
:non-drag-area-selectorstringundefined防止拖动的 CSS 选择器。当您的可拖动项中的某处有表单元素或可选文本时,这会很有用。它优先于dragHandleSelector
:drag-begin-delaynumber0200用于触摸设备)时间以毫秒为单位。按下项目后延迟开始拖动。在延迟之前移动光标超过 5px 将取消拖动。
:animation-durationnumber250以毫秒为单位的动画持续时间。为了保持一致,此动画持续时间将应用于放置和重新排序动画。
:auto-scroll-enabledbooleantrue如果拖动项目接近边界,第一个可滚动父项将自动滚动。
:drag-classstringundefined要添加到被拖动的幽灵项目的类。类将在添加到 DOM 后添加,因此类中的任何转换都将按预期应用。
:drop-classstringundefined在放置动画开始之前添加到幽灵项目的类。
:remove-on-drop-outbooleanundefined如果将元素从任何相关容器中删除,则设置为 true onDrop 将使用 removedIndex 调用
:drop-placeholderboolean,objectundefined放置占位符的选项。className , animationDuration , showOnTop

tag

标记名称或节点定义以呈现容器的根元素。
默认值为“div”。

:tag="{value: 'table', props: {class: 'my-table'}}"
tag = "table";