Issue #2399💬 AnsweredOpened November 12, 2019by imranali20450 reactions

SVG Component Not Draggable

快速解答by imranali2045

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

Read full answer below ↓

Question

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.

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

HD2-GoogleChrome2019-11-1215-08

Answers (3)

imranali2045November 13, 2019

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

artfNovember 16, 2019

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)

imranali2045November 18, 2019

@artf ok thanks

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.