可拖动的组件抽屉到网格

时间:2019-06-28 00:44:18

标签: vuejs2 vue-component mouseover vuetify.js

我正在使用vue-grid-layout来显示我的仪表板。我可以通过推送/拆分到绑定到vue-grid-layout指令的数组来添加和删除网格项。我的组件抽屉指令当前发出一个事件,该事件将组件添加到项目数组中。 gridItem有一个X按钮,该按钮发出一个事件,该事件将自己从项目数组中删除。

我现在正在尝试添加功能,以便用户可以从抽屉中拖动一项并将其手动放置在网格上。我当时正在考虑围绕vue-grid-layout指令创建一个包装div。然后绑定到鼠标悬停,这样我就可以获得鼠标的x / y坐标,并尝试将其转换为网格可以理解的东西。我不确定如何将其捕捉到当前网格的列/行中。

一旦检测到鼠标悬停,我应该在该项目数组中添加一些占位符项目。然后以某种方式将焦点更改为该焦点,以便用户继续拖动它?

0 个答案:

没有答案