vue-grid-layout组件如何做到拖拽生产新的组件

现在vue-grid-layout是可以栅格拖拽,添加新组件也是固定到某位置。如何可以做到:比如左边有一列的组件,拖拽后可到栅格布局里进行排位,也不是先添加到某个地方后再排位

阅读 6.5k
4 个回答

今天也碰到了和题主类似的需求,不知道题主最后是如何解决的,我这边说下我的实现方式。
1.通过控制台的eventlistener可以判断出组件是通过pointerup pointerdown pointermove事件来实现拖动的,分析出这点,接下来就好办了
2.在图中左侧元素的dragenter事件中触发pointerdown 自定义事件

dom.dispatchEvent(new PointerEvent('pointerdown', {
  clientX: event.clientX,
  clientY: event.clientY,
  pointerType: 'mouse',
  bubbles: true
})

3.dragover事件中触发pointermove 自定义事件,drop事件中触发pointerup 自定义事件,方式和上面一样
大功告成!
GIF 2020-7-8 星期三 16-39-47.gif

demo:
https://pan.baidu.com/s/1x3gr...
如有帮助就顺手点个赞吧,谢谢各位大佬~

新手上路,请多包涵

求代码一份,十分感谢。446443540@qq.com

新手上路,请多包涵

跪求,请大佬给一份demo,搞了蛮久还是有些问题,295891987@qq.com。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏