Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
407 views
in Technique[技术] by (71.8m points)

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

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

今天也碰到了和题主类似的需求,不知道题主最后是如何解决的,我这边说下我的实现方式。
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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...