随着前端开发技术的不断进步，实现各种交互效果的需求也越来越多，其中拖拽组件是比较常用的功能之一。而 @atomic-nyc/vue-draggable 就是一个非常不错的 Vue.js 的拖拽组件库，本文将详细介绍其使用教程。
安装
NPM 安装
通过 NPM 安装 @atomic-nyc/vue-draggable 是最简单的方式，使用以下命令：
npm install @atomic-nyc/vue-draggable --save
如果你使用的是 yarn，可以使用以下命令：
yarn add @atomic-nyc/vue-draggable
CDN 引入
如果你不想使用 NPM，可以通过 CDN 的方式引入 @atomic-nyc/vue-draggable：
<script src="https://unpkg.com/@atomic-nyc/vue-draggable@v2.23.2"></script>
使用
全局注册
在 main.js 中全局注册组件：
import Vue from 'vue';
import draggable from '@atomic-nyc/vue-draggable';
Vue.component('draggable', draggable);局部注册
在 Vue 单文件组件中局部注册组件：
import draggable from '@atomic-nyc/vue-draggable';
export default {
components: {
draggable,
},
};示例代码
-- -------------------- ---- -------
----------
----------
--------------
----------------
----------------
-
----
----------- -- -----
--------------
------------
-
---- ---------------------
---- ------------------ --------- --------
------
------------
-----------
--------
------ --------- ---- ----------------------------
------ ------- -
----------- -
----------
--
------ -
------ -
----- -
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
--
--
--
--
---------相关配置
v-model
必选参数，用于绑定拖拽后的数据。
handle
拖拽的操作区域，只有指定了该区域才能进行拖拽操作。
<div class="handle"></div>
animation
动画时间，单位为毫秒。
<draggable :animation="500"></draggable>
group
组标识，设置相同的组标识可以实现跨容器的拖拽。
<draggable :group="{ name: 'items', pull: true, put: true }"></draggable>
<draggable :group="{ name: 'items', pull: true, put: true }"></draggable>ghost-class
设置拖拽时克隆元素的 class。
<draggable ghost-class="ghost"></draggable>
force-fallback
当浏览器不支持拖拽时，是否强制使用回退功能。
<draggable :force-fallback="true"></draggable>
更多详细的配置项，请参考官方文档。
总结
@atomic-nyc/vue-draggable 是一个功能强大且易于使用的 Vue.js 拖拽组件库，我们在项目中可以根据需求使用它来快速实现拖拽交互功能。在使用时，我们需要根据具体情况进行相关的配置，如果遇到问题可以参考官方文档来解决。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005665281e8991b448e2759