vue抽象节点_轻巧的Vue包装器，可将拖放的抽象部分抽象化

vue抽象节点

Vue拖放 (vue-drag-drop)

A lightweight wrapper that abstracts away the wonkier parts of the Drag and Drop API.

一个轻量级的包装器，可以抽象出拖放API的重要部分。

View demo 查看演示 Download Source 下载源

The Drag and Drop API is pretty jank. Here are a handful of annoying issues:

拖放API很脏。 以下是一些令人讨厌的问题：

• Data transferred from a draggable element to a dropzone is only available in the dropzone's drop event. Want to take a look at the draggable's data during the dragover event? Say, to determine whether or not we can allow the drop? Sorry! No helpful UI feedback for your users!

  从可拖动元素传输到drop数据仅在drop的drop事件中可用。 想拿期间看看拖动的数据dragover事件？ 说，以确定我们是否可以允许下降？ 抱歉! 没有对您的用户有用的UI反馈！

• Got an object or an array you want to transfer between a draggable and a dropzone? Tough. Gotta serialize it. Say goodbye to your references.

  有想要在可拖动区域和拖放区域之间传输的对象或数组？ 强硬。 要序列化它。 与您的参考告别。

• Did you remember to do event.preventDefault() on dragover for every element you want to be used as a dropzone?

  您是否记得要在dragover为要用作放置区的每个元素执行event.preventDefault() ？

And so on.

等等。

The goal of this package is to provide a simple, lightweight wrapper around the API so you don't have to fiddle with all that nonsense. There are plenty of existing Vue components that provide rich handling of drag and drop, usually between or among lists and with tons of bells and whistles. They're great, but sometimes you don't need all that business, or it even gets in the way.

该软件包的目标是为API提供一个简单，轻便的包装器，这样您就不必摆弄所有的废话了。 有很多现有的Vue组件可以提供丰富的拖放操作，通常在列表之间或列表之间，并且带有大量的铃声和口哨声。 它们很棒，但是有时候您不需要所有的事情，甚至会妨碍您的发展。

安装 (Installation)

npm install --save vue-drag-drop

默认导入 (Default import)

import Vue from 'vue';
import { Drag, Drop } from 'vue-drag-drop';

Vue.component('drag', Drag);
Vue.component('drop', Drop);

Or install both:

或同时安装：

import Vue from 'vue';
import VueDragDrop from 'vue-drag-drop';

Vue.use(VueDragDrop);

浏览器 (Browser)

<script src="vue.js"></script>
<script src="vue-drag-drop/dist/vue-drag-drop.browser.js"></script>

The plugin should be auto-installed. If not, you can install it manually with the instructions below.

该插件应自动安装。 如果没有，您可以按照以下说明手动安装。

Vue.component('drag', VueDragDrop.Drag)
Vue.component('drop', VueDragDrop.Drop)

Or install both:

或同时安装：

Vue.use(VueDragDrop)

翻译自: https://vuejsexamples.com/a-lightweight-vue-wrapper-that-abstracts-away-the-wonkier-parts-of-the-drag-and-drop/

vue抽象节点