vue-grid-layout怎么在move事件里设置grid-item的底部位置
时间: 2024-05-15 22:18:12 浏览: 114
使用Vue-Grid-Layout实现自定义工作台
对于vue-grid-layout,在move事件中设置grid-item的底部位置,可以使用如下代码:
```
<vue-grid-layout
:layout="layout"
:col-num="12"
:row-height="30"
:is-draggable="true"
:is-resizable="true"
:vertical-compact="true"
:margin="[10, 10]"
:use-css-transforms="true"
@drag="onDrag"
>
// 在move事件中设置grid-item底部位置
onDrag(e) {
const target = e.target;
const bottom = parseInt(target.style.bottom);
if (!isNaN(bottom)) {
const layout = this.layout;
const item = layout.find(item => item.i === target.id);
item.y = Math.round((e.clientY - e.marginTop) / this.rowHeight) + item.sy - 1;
}
},
```
其中,onDrag函数是move事件的回调函数,通过e.target获取被拖动的元素,然后获取其底部位置,如果底部位置存在,则修改相应的grid-item的位置信息。具体的实现可以根据自己的业务需求自行修改,以上仅供参考。
阅读全文