vuedraggable 是一款拖拽元素的插件。
插件地址：https://www.npmjs.com/package/vuedraggable

插件使用起来还是很简单的，官网给出了例子：

<draggable v-model="myArray" :options="{group:'people'}" @start="drag=true" @end="drag=false">
   <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>

这样便能实现代码拖拽的问题了。其中的start和end分别代表了代码开始拖拽事件和代码拖拽事件结束，可以给他设置方法。

在我最近开发时遇到了一个问题，当鼠标拖拽元素时，鼠标在元素内应该是这种样式：
在这里插入图片描述
但是我的鼠标却是这种脱离元素的样式：
在这里插入图片描述
关于这个问题我开始对比我的代码，然后重新写demo发现代码都是一样的，demo也能实现，一直没有找到问题的关键所在，然后我重新还原了我的package，发现问题得到了解决。至于原因，还没有找到，后面会继续探索这些问题。

# vue.js # 前端
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue