Vue简单实现自定义拖拽

2022年12月29日10:26:31

Vue简单实现自定义拖拽

前言

我们在写Vue项目的时候有时候会遇到一些拖拽的问题，但是Vue又不直接操作底层DOM，这个时候我们就需要用到自定义指令了来对底层DOM进行操作。

什么是自定义指令

先来看看官方的解释：除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。官网解释，这里就不多做介绍了。大家可自行去学习。

lib-drag插件的使用

第一步

npm i lib-drag -S

第二步

在入口文件中引入
import drag from “lib-drag”
Vue.directive('自定义指令ID',drag)

第三步

在页面中通过<div v-自定义指令ID=‘这里需要有个布尔值’>
为true时盒子全部可以拖拽，为false时只有顶部可以拖拽。
父盒子一定要有高度！！！！！

  • 作者：香梨炒虾米
  • 原文链接：https://blog.csdn.net/weixin_61435288/article/details/122601203
    更新时间：2022年12月29日10:26:31 ，共 448 字。