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 !

显示，不告诉！

安装 (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)

拖动开始 (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 拖拽排序