SVG Component Not Draggable

[imranali2045]

Hi, I am using grapesjs in angular 7.What I want to achieve when ever canvas drop method called I add svg component in canvas.I have add svg component on canvas drop method.But its not draggable. I attach my code and video for better understand.Thanks @artf if you help me.

const domComponents = this._editor.DomComponents; const wrapperChildren = domComponents.getComponents(); comp = wrapperChildren.add({ tagName: 'svg', type: 'svg', attributes: { viewBox: '0 0 100 100', xmlns: 'http://www.w3.org/2000/svg' }, stylable: true, resizable: true, removable: true, // Can't remove it draggable: true, // Can't move it copyable: true, // Disable copy/past content: <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />, });

[imranali2045]

@artf please see that It is very important for me to solve this problem.thanks

[artf]

Unfortunately, HTML5 drag and drop API doesn’t work on SVG elements, so if you need to support it you have to wrap your SVG components (eg. in a div element)

[imranali2045]

@artf ok thanks

[pardeepjainsolulab]

Tried wrapping into another components HTML Div but still not working for me, any other workaround?