介绍
cf-vue-draggable 是一个 Vue.js 的拖拽组件库，相比于其他库，这个库有如下特点：
- 可以嵌套
- 可以在嵌套中移动
- 可以自定义拖拽样式
- 可以限制拖拽范围
- 可以调整拖拽改变大小
- 可以使用插槽自定义内容
- 可以使用任何 Vue.js 组件进行拖拽
安装
使用 npm 安装：
npm install cf-vue-draggable --save
使用
在项目中引入该组件：
import cfVueDraggable from "cf-vue-draggable";
然后在 Vue 中注册：
Vue.use(cfVueDraggable);
接下来我们就可以在页面中正常使用该组件了：
-- -------------------- ---- -------
----------
------------- -------------- ----------------
--- ----------- -- -------- ---- -------
---------------
-----------
--------
------ ------- -
------ -
------ -
----- --------- -------- --------
--
-
--
---------上述代码中，我们在 cf-draggable 中使用了 v-model 来实现数据绑定，element 属性用来设置拖拽容器的类型，默认为 div，通过设置 element 为 ul 来实现拖拽列表的效果。
自定义拖拽样式
可以通过 CSS 来自定义拖拽时的样式，如下：
-- -------------------- ---- ------- ---------- - ----------------- -------- ------- --- ----- -------- -------- ----- ------ ------ -------------- ----- ------------ ------ ---------- ----------- ------- ----- - ---------- ------- - ------- ----- -
其中 .draggable 为拖拽容器的类名，.handle 为拖拽句柄的类名。
限制拖拽范围
可以通过设置 bounding-box 属性来限制拖拽范围，如下：
-- -------------------- ---- -------
----------
------------- -------------- ---------------------- ----------------
--- ----------- -- -------- ---- -------
---------------
-----------
--------
------ ------- -
------ -
------ -
----- --------- -------- --------
--
-
--
---------上述代码中，我们通过设置 bounding-box 属性为 #test 来限制拖拽范围，其中 #test 为一个具有固定位置和大小的容器，这个容器可以是任何包含拖拽容器的容器。
调整拖拽改变大小
可以通过设置 resizable 属性来实现拖拽容器大小的调整，如下：
-- -------------------- ---- -------
----------
------------- -------------- ----------------- ----------------
--- ----------- -- -------- ---- -------
---------------
-----------
--------
------ ------- -
------ -
------ -
----- --------- -------- --------
--
-
--
---------上述代码中，我们通过设置 resizable 属性为 true 来实现拖拽容器大小的调整。
使用插槽自定义内容
可以使用插槽来自定义内容，如下：
-- -------------------- ---- -------
----------
------------- -------------- ----------------
--------- -------------- ---- ---
------ ---------- -------
-----------
---------------
-----------
--------
------ ------- -
------ -
------ -
----- -- ------ ------- -- - ------ ------- -- - ------ ------- --
--
-
--
---------上述代码中，我们通过使用插槽来自定义每个列表项的内容。
使用任何 Vue.js 组件进行拖拽
可以使用任何 Vue.js 组件进行拖拽，如下：
-- -------------------- ---- -------
----------
------------- -------------- ----------------
------------- ----------- -- ----- -------------- ----------------------------
---------------
-----------
--------
------ ----------- ---- ---------------------------
------ ------- -
----------- -
-----------
--
------ -
------ -
----- -- --- -- ------ ------- -- - --- -- ------ ------- -- - --- -- ------ ------- --
--
-
--
---------上述代码中，我们使用了一个名为 my-component 的组件来进行拖拽，通过传递数据实现数据绑定。
总结
通过上述介绍，我们了解到了如何使用 npm 包 cf-vue-draggable，该库提供了丰富的拖拽组件功能，通过自定义样式、限制拖拽范围、调整拖拽大小、自定义内容和使用任意 Vue.js 组件等方法，我们可以在项目中使用该库实现更复杂的拖拽需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5751ab1864dac66d89