参考解决办法： 狗尾草-Vue拖拽组件
遇到问题及解决：
1.unable to preventDefault inside passive event listener due to taeget being treated as passive
原因是为了滚动顺滑，touchmove等事件会被浏览器默认设置为passive：true，需要手动设置成false。参考： Unable to preventDefault inside passive event listener 。文中提到的两种办法，第一种可以，第二种css办法试了无效（可能是设置的位置不对？）
2.拖拽之后，被拖拽的组件大小会改变
我是只需要y轴拖拽，拖拽后空间的高度改变了，拖过的路径都变成了div的高度，再点击之前组件挡住的地方，会出现点击到组件的效果。解决办法是设置组件height属性。
3.设置tansition后拖拽“不动”
网上看的一个例子里边加了transition，可能是想让效果平滑一些，但是却有一种拖不动的感觉。当时以为是拖拽功能实现的有问题，于是删了换了上边链接里的方法，拖拽get√。然后试着加了一下transition，又出现了阻塞。所以这里应该是不适合用transition属性的，而且不用也挺平滑的。
学习总结：
拖拽功能的实现，主要是通过监听鼠标事件，计算各种数值，不断调整组件的位置。因此，需要复习的知识点是鼠标事件，各种尺寸数据及之间的关系。存在的不足是，虽然发现了问题并解决了，但还是不知道问题原理层面的原因。知其然，不知其所以然，希望之后能把这块补充起来。
前端框架Ant Design of Vue 表格使用 vue-draggable-resizabl -- 固定列问题修复
glass_Girl
原创
关注
0点赞·289人阅读
表格如果加了列拖拽功能，并且设置了列fixed。
出现了一个头疼的现象
问题：
因为拖拽需要设置width。这个时候。你屏幕宽度超过了他们设置的widht之和。Ant Des的表格自适应放宽。可是加了resizabl的列依旧是固定宽度。导致。显示了两个相同的列。还是不一样的长度
解决方式 ：
在拖拽/加载时判断是否超长。动态去掉fixed配置项
页面引入
import vdr from "vue-draggable-resizable-gorkys"
import "vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css"
import debounce from "lodash/debounce"
登录后复制
:components='components'
this.components = {
header: {
cell: (h, props, children) =>{
const { key, ...restProps } = props
// 此处的this.columns 是定义的table的表头属性变量
const col = this.columns.find((col) =>{
const k = col.dataIndex || col.key
return k === key
})
if (!col || !col.width) {
return h("th", { ...restProps }, [...children])
}
const { minWidth = 200, maxWidth } = col || {}
const dragProps = {
key: col.dataIndex || col.key,
class: "",
attrs: {
w: col.width,
h: "auto",
axis: "x",
minWidth,
maxWidth,
draggable: false,
resizable: true,
handles: ["mr"]
},
on: {
resizing: (l, t, w) =>{
col.width = Math.max(w, 1)
},
resizestop: () =>{
this.resize()
}
}
}
const drag = h(vdr, { ...dragProps }, [...children])
restProps.class += " resize-table-th"
return h(
"th",
{
...restProps
},
[drag]
)
}
}
}
登录后复制
重新计算表列：this.resize()
记得给表格添加 样式：.draggable-table，设置：:scroll="{x:true}"
// 动态计算Columns
export function calculateColumns(columns) {
const domTable =
window.document.querySelector(".draggable-table .ant-table-body") || {}
const { scrollWidth = 0,clientWidth = 0 } = domTable
scrollX = clientWidth <scrollWidth - 1
if (scrollX) {
columns = columns.map(o =>{
if (o.fixedInit) {
o.fixed = o.fixedInit// 恢复浮动列配置
}
return o
})
} else {
columns = columns.map(o =>{
if (o.fixed) {
o.fixedInit = o.fixed
o.fixed = undefined
}
return o
})
}
return columns
}
登录后复制
窗口变化都要去更新
mounted() {
this.$options._resize = debounce(this.resize, 150)
window.addEventListener("resize", this.$options._resize)
},
beforeDestroy() {
window.removeEventListener("resize", this.$options._resize)
},
登录后复制
样式：
// 可拖拽表头表格样式
.resize-table-th .vdr {
height: 100% !important
width: 100% !important
padding: @rem7 @rem16 !important
border: none
transform: none !important
position: relative !important
}
.resize-table-th {
padding: 0 !important
&:hover .handle-mr {
background: @yn-auxiliary-color
}
}
.resize-table-th .handle {
cursor: col-resize
border: none !important
box-shadow: none !important
}
.resize-table-th .handle-mr {
width: 2px !important
z-index: 2
cursor: col-resize
background: inherit
border: none
height: calc(100% - @rem12) !important
top: @rem6 !important
right: 0 !important
display: block !important
}
登录后复制
然后不论怎么拖拽。变窗口大小。固定列都能正常展示了
本人也在不断的学习和积累中，文章中有不足和误导的地方还请见谅，可以给我留言指正。希望和大家共同进步，共建和谐学习环境。
1、npm安装
2、bower安装
3、CDN
注： 最好放在<body>中引用，不要放在<head>中。
需要引入一些css样式，在页面中引入 dist/dragula.css 或 dist/dragula.min.css ，如果你使用的是Stylus，你可以这样引入
下面的示例允许用户将元素从中left拖入right和从中right拖入left
您还可以提供一个options对象。以下是默认值的介绍
您可以省略container参数，稍后动态添加容器。
还可以从options对象设置容器
你还可以设置一个没有container和options的draglua
dragula方法返回一个带有简洁API的小对象。我们将把dragula返回的API称为drake。
Dragula只使用四个CSS类。下面将快速解释它们的用途
默认：
Github/dragula
