触发了Sortable的拖拽vue自定义事件的触发之后 无法触发vue的点击vue自定义事件的触发了

来源：蜘蛛抓取(WebSpider) 时间：2020-05-28 09:47 标签： vue自定义事件的触发

最近几天在研究有关vue实现拖拽的功能不过跟一般的拖拽排序有点不同，这个需求可能出现多行多列嵌套的表单元素数据也是递归形式的出现。我也是在vuedraggable的基础上扩展實现的如何想了解更多的拖拽排序功能可以参考

  1. 表单元素可能出现嵌套，数据出现树形结构
  2. 实现拖拽功能表单元素可以移动到空的列裏面，但是表单元素内容的不能来回拖拽排序
  3. 行与行之间可以拖动排序列与列直接不能移动排序，能移动的只是字段数据也就是表单元素
  4. 右边列表里的字段可以拖拽添加到左边的空白没内容的列里面

Drag组件也是要递归的组件代码

注意：实现递归一定定义Drag组件的name值要不就容噫报错


emptyInsertThreshold:拖动时，鼠标必须与空的可排序对象之间的距离（以像素为单位）以便将拖动元素插入到该可排序对象中。默认为5设置为0禁用此功能。这个参数要适当的设置如果是默认值，当列为空的时候很难把元素拖进去，这个也是一个比较难解决的点因为需要把右边芓段元素拖动到左边空列中，或者左边的元素移动到空的列里

clone的cloneDog方法实现复制功能，首先递归循环数据判断是需要复制的元素在左边的列表中是否存在若是存在，则取消复制不存在，则复制

这篇文章分享的主要技术点就是vuedraggable拖拽排序和复制、嵌套拖拽排序功能、vue组件遞归功能。

有些需求是要求有表格拖拽排序或者是一些div拖拽排序

所以我们可以用sortablejs进行，官方文档为：

<!-- 在这里要注意表格一定添加row-key这个属性，因为是用来优化 Table 的渲染不然拖拽无效果 --> // 拖拽vue自定义事件的触发一定要放在 mounted 生命周期内，因为这时真实的DOM才渲染出来 // 截止上面为止数组已经进行了更换，但是会看到表格的頭部label没有更新所以就进行了数组清空重新赋值

// 拖拽vue自定义事件的触发一定要放在 mounted 生命周期内，因为这时真实的DOM才渲染出来 // 截止上面为止数组已经进行了更换，但是会看到视图没有更新所以就进行了数组清空重新赋值

我要回帖

更多关于 vue自定义事件的触发 的文章

 

随机推荐