Vue.js 2的拖放实现

Easy-DnD (Easy-DnD)

Easy-DnD is a drag and drop implementation for Vue.js 2 that uses only standard mouse events instead of the HTML5 drag and drop API, which is impossible to work with. Think of it as a way to transfer data from some components to others using the mouse or support for a mouse assisted copy/cut - paste. It also allows for lists to be reordered by drag and drop.

Easy-DnD是Vue.js 2的拖放实现，仅使用标准鼠标事件，而不使用HTML5拖放API。 可以将它视为使用鼠标将数据从某些组件传输到其他组件的一种方式，或者支持鼠标辅助的复制/剪切-粘贴。 它还允许通过拖放对列表进行重新排序。

View Demo 查看演示 View Github 查看Github

These demos are meant to be pretty and reflect real life examples. For more barebones examples, see the manual.

这些演示旨在使它们漂亮并反映现实生活中的示例。 有关更多准系统示例，请参见手册。

The following demo features list reordering, drag and drop between two lists, custom drag images and custom feedback when inserting new items. It uses Vuetify components.

以下演示功能将列表重新排序，在两个列表之间拖放，自定义拖动图像和自定义反馈(在插入新项目时)。 它使用Vuetify组件。

The following demo features drag and drop between a table and a list, custom drag images and a custom style for drop areas when the drop is allowed. It uses Vuetify components.

以下演示功能在允许放置的情况下在表格和列表之间拖放，自定义拖动图像和放置区域的自定义样式。 它使用Vuetify组件。

https://codesandbox.io/s/easy-dnd-demo-2-xnqbz

https://codesandbox.io/s/easy-dnd-demo-2-xnqbz

总览 (Overview)

There are four components : Drag, Drop, DropMask and DropList.

有四个组件：Drag，Drop，DropMask和DropList。

The Drag component is meant to define an area from which data can be exported. The Drop component is meant to define an area into which data can be imported. Drop components can be nested forming hierarchies of arbitrary depth. The DropMask component is meant to create an island insensitive to drag and drop on top of a Drop component. The DropList component is a special kind of drop component that displays a list of items that supports dragging into and reordering.

Drag组件用于定义可以从中导出数据的区域。 Drop组件用于定义可以将数据导入到的区域。 拖放组件可以嵌套形成任意深度的层次结构。 DropMask组件旨在创建一个对Drop组件不敏感的孤岛。 DropList组件是一种特殊的放置组件，它显示支持拖动和重新排序的项目列表。

大事记 (Events)

All events carry the current state of the drag operation by means of the following properties :

所有事件均通过以下属性来携带拖动操作的当前状态：

• type : the type of the data being transfered

  type ：要传输的数据的类型

• data : the data being transfered

  data ：正在传输的数据

• position : the current position of the mouse cursor

  position ：鼠标光标的当前位置

• top : the foremost Drop component currently under the mouse cursor if any

  top ：当前鼠标光标下方的第一个Drop组件(如果有)

• previousTop : for dragenter and dragleave, the previous value of top if any

  previousTop ：对于Dragenter和Dragleave，top的上一个值(如果有)

• source : the Drag component where the drag originated

  source ：拖动起源的Drag组件

Drag components emit the following events :

拖动组件会发出以下事件：

• dragstart : triggered when a drag operation starts

  dragstart ：拖动操作开始时触发

• dragend : triggered when a drag operation terminates (whether successfuly or not)

  dragend ：在拖动操作终止时触发(是否成功)

• cut / copy : triggered when a drag operation completes successfuly on a Drop component that requires the data to be removed / copied

  cut / copy ：在需要删除/复制数据的放置组件上的拖动操作成功完成时触发

Drop components emit the following events :

Drop组件会发出以下事件：