vue.js 拖拽排序_快速轻巧的Vue.js拖放可排序库

vue.js 拖拽排序

vue-smooth-dnd (vue-smooth-dnd)

A fast and lightweight drag&drop, sortable library for Vue.js with many configuration options covering many d&d scenarios.

用于Vue.js的快速，轻巧的拖放式可排序库，具有许多配置选项，涵盖了许多d＆d场景。

This library consists wrapper Vue.js components over smooth-dnd library.

该库由smooth-dnd库组成的包装Vue.js组件。

Show, don't tell !

显示，不告诉！

View demo 查看演示 Download Source 下载源

安装 (Installation)

npm i vue-smooth-dnd

用法 (Usage)

Vue (Vue)

<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: function() {
    return {
      items: generateItems(50, i => ({ id: i, data: "Draggable " + i }))
    };
  },
  methods: {
    onDrop: function(dropResult) {
      this.items = applyDrag(this.items, dropResult);
    }
  }
};
</script>

API (API)

容器 (Container)

Component that contains the draggable elements or components. Each of its children should be wrapped by Draggable component

包含可拖动元素或组件的组件。 它的每个子级都应由Draggable组件包装

物产 (Properties)

Property	Type	Default	Description
:orientation	string	vertical	Orientation of the container. Can be horizontal or vertical.
:behaviour	string	move	Property to describe weather the dragging item will be moved or copied to target container. Can be move or copy.
:group-name	string	undefined	Draggables can be moved between the containers having the same group names. If not set container will not accept drags from outside. This behaviour can be overriden by shouldAcceptDrop function. See below.
:lock-axis	string	undefined	Locks the movement axis of the dragging. Possible values are x, y or undefined.
:drag-handle-selector	string	undefined	Css selector to test for enabling dragging. If not given item can be grabbed from anywhere in its boundaries.
:non-drag-area-selector	string	undefined	Css selector to prevent dragging. Can be useful when you have form elements or selectable text somewhere inside your draggable item. It has a precedence over dragHandleSelector.
:drag-begin-delay	number	0 (200 for touch devices)	Time in milisecond. Delay to start dragging after item is pressed. Moving cursor before the delay more than 5px will cancel dragging.
:animation-duration	number	250	Animation duration in milisecond. To be consistent this animation duration will be applied to both drop and reorder animations.
:auto-scroll-enabled	boolean	true	First scrollable parent will scroll automatically if dragging item is close to boundaries.
:drag-class	string	undefined	Class to be added to the ghost item being dragged. The class will be added after it's added to the DOM so any transition in the class will be applied as intended.
:drop-class	string	undefined	Class to be added to the ghost item just before the drop animation begins.
@drag-start	function	undefined	See descriptions below
@drop	function	undefined	See descriptions below
:get-child-payload	function	undefined	See descriptions below
:should-animate-drop	function	undefined	See descriptions below
:should-accept-drop	function	undefined	See descriptions below
@drag-enter	function	undefined	See descriptions below
@drag-leave	function	undefined	See descriptions below

属性	类型	默认	描述
：方向	串	vertical	容器的方向。 可以是水平或垂直的 。
：行为	串	move	描述天气的属性，拖动项将被移动或复制到目标容器。 可以移动或复制 。
：团队名字	串	undefined	可以在具有相同组名的容器之间移动可拖动对象。 如果未设置，则容器将不接受来自外部的拖动。 可以通过shouldAcceptDrop函数覆盖此行为。 见下文。
：锁轴	串	undefined	锁定拖动的移动轴。 可能的值为x ， y或undefined 。
：拖动句柄选择器	串	undefined	CSS选择器进行测试以启用拖动。 如果没有提供，则可以从其边界内的任何位置抓取物品。
：非拖动区域选择器	串	undefined	CSS选择器可防止拖动。 当您在可拖动项内的某处具有表单元素或可选文本时，此选项很有用。 它的优先级高于dragHandleSelector 。
：拖曳开始延迟	数	0 (触摸设备为200 )	时间以毫秒为单位。 按下项目后开始拖动的延迟时间。 在延迟超过5px之前移动光标将取消拖动。
：动画持续时间	数	250	动画持续时间(以毫秒为单位)。 为了保持一致，此动画持续时间将同时应用于拖放动画和重新排序动画。
：启用自动滚动	布尔值	true	如果拖动项靠近边界，则第一个可滚动父级将自动滚动。
：拖动类	串	undefined	要添加到要拖动的幻影项的类。 该类将在添加到DOM之后添加，因此该类中的任何过渡都将按预期应用。
：下降级	串	undefined	在放下动画开始之前要添加到ghost项目的类。
@ drag-start	功能	undefined	请参阅下面的说明
@下降	功能	undefined	请参阅下面的说明
：get-child-payload	功能	undefined	请参阅下面的说明
：应该动画放	功能	undefined	请参阅下面的说明
：应该接受	功能	undefined	请参阅下面的说明
@ drag-enter	功能	undefined	请参阅下面的说明
@ drag-leave	功能	undefined	请参阅下面的说明

---

---

拖动开始 (drag-start)

Event to be emitted only by the container which drag starts from.

仅由拖动开始的容器发出的事件。

@drag-start="onDragStart($event)"

onDragStart: function({index, payload}) {
  ...
}

参量 (Parameters)

• event : object

  事件 ： object

  • index : index ： number : index of the child itemnumber ：子项的索引
  • payload : 有效负载 ： object : the payload object that is returned by get-child-payload function. It will be undefined in case get-child-payload is not set.object ：由get-child-payload函数返回的有效负载对象。 如果未设置get-child-payload，它将是未定义的。

下降 (drop)

The event to be emitted by any relevant container when drop is over. (After drop animation ends). Source container and any container that could accept drop is considered relevant.

放置结束时，任何相关容器将发出的事件。 (放下动画结束后)。 源容器和任何可以接受降落的容器都被认为是相关的。

@drop="onDrop($event)"

onDrop: function(dropResult) {
  const { removedIndex, addedIndex, payload, element } = dropResult;
  ...
}

参量 (Parameters)

• dropResult : object

  dropResult ： object

  • removedIndex : removeIndex ： number : index of the removed children. Will be number ：移除的孩子的索引。 如果未删除任何项目，则为null if no item is removed.null 。
  • addedIndex : addIndex ： number : index to add droppped item. Will be number ：添加删除项目的索引。 如果未添加任何项目，则为null if no item is added.null 。
  • payload : payload ： object : the payload object retrieved by calling object ：通过调用get-child-payload function.get-child-payload函数检索的有效载荷对象。
  • element : element ： DOMElement : the DOM element that is movedDOMElement ：移动的DOM元素

获得孩子的有效载荷 (get-child-payload)

The function to be called to get the payload object to be passed onDrop function.

要获取要通过onDrop函数传递的有效负载对象的函数。

:get-child-payload="getChildPayload"

getChildPayload: function(index) {
  return {
    ...
  }
}

参量 (Parameters)

• index : number : index of the child item

  index ： number ：子项的索引

退货 (Returns)

• payload : object

  有效负载 ： object

应该动画掉落 (should-animate-drop)

The function to be called by the target container to which the dragged item will be droppped. Sometimes dragged item's dimensions are not suitable with the target container and dropping animation can be wierd. So it can be disabled by returning false. If not set drop animations are enabled.

将被拖放的项目放置到的目标容器所调用的函数。 有时，被拖动项目的尺寸不适合目标容器，并且放下动画可能会很麻烦。 因此可以通过返回false禁用它。 如果未设置，则启用放下动画。

:should-animate-drop="shouldAnimateDrop"

shouldAnimateDrop: function(sourceContainerOptions, payload) {
  return false;
}

参量 (Parameters)

• sourceContainerOptions : object : options of the source container. (parent container of the dragged item)

  sourceContainerOptions ： object ：源容器的选项。 (被拖动项的父容器)

• payload : object : the payload object retrieved by calling get-child-payload function.

  payload ： object ：通过调用get-child-payload函数检索的有效载荷对象。

退货 (Returns)

• boolean : true / false

  布尔值 ： 对/错

应该接受 (should-accept-drop)

The function to be called by all containers before drag starts to determine the containers to which the drop is possible. Setting this function will override the group-name property and only the return value of this function will be taken into account.

开始拖动之前，所有容器都将调用该函数，以确定可以将其拖放到的容器。 设置此函数将覆盖group-name属性，并且仅考虑该函数的返回值。

:should-accept-drop="shouldAcceptDrop"

shouldAcceptDrop: function(sourceContainerOptions, payload) {
  return true;
}

参量 (Parameters)

• sourceContainerOptions : object : options of the source container. (parent container of the dragged item)

  sourceContainerOptions ： object ：源容器的选项。 (被拖动项的父容器)

• payload : object : the payload object retrieved by calling get-child-payload function.

  payload ： object ：通过调用get-child-payload函数检索的有效载荷对象。

退货 (Returns)

• boolean : true / false

  布尔值 ： 对/错

拖动输入 (drag-enter)

The event to be emitted by the relevant container whenever a dragged item enters its boundaries while dragging.

每当拖动的项目进入其边界时，相关容器将发出的事件。

@drag-enter="onDragEnter()"

onDragEnter: function() {
  ...
}

拖曳离开 (drag-leave)

The event to be emitted by the relevant container whenever a dragged item leaves its boundaries while dragging.

每当拖动的项目离开其边界时，相关容器将发出的事件。

@drag-leave="onDragLeave()"

onDragLeave: function() {
  ...
}

可拖动 (Draggable)

Wrapper component for Container's children. Every child element should be wrapped with Draggable component.

容器子项的包装器组件。 每个子元素都应使用Draggable组件包装。

翻译自: https://vuejsexamples.com/a-fast-and-lightweight-drag-drop-sortable-library-for-vue-js/

vue.js 拖拽排序