This tiny Angular project is to test dragging in an SVG-templated component.
Those who use Angular have all the incentives to use Angular Material,
which now has it own drag class
in the CDK, which works great for HTML DOM components, especially reordering lists.
However cdkDrag is not implemented for SVG well. According to this stackoverflow item CDK drag used to work for Angular 7 but not for Angular 11.
So for SVG based components, what are the options? I can see 3 possibilities
- The plain-draggable library. This is my choice, and this is what this test project is about
- manually implementing dragging with mouseDown etc.
- Using heavy and sometimes non-free 3rd party libraries like d3 or green sock
- Good start for reading would be plain-draggable issues/96
- Working simple example by the author of plain-draggble is a good place to start.
- Use
declare let PlainDraggable: any;
instead ofimport PlainDraggable from 'plain-draggable';
I wish there were@types/plain-draggable
typings, and Angular module but there isn't - Add plain-draggable to
angular.json/.../scripts
. See issue 100 or StackOverflow cover
"scripts": [
{
"input": "node_modules/plain-draggable/plain-draggable.min.js",
"inject": true,
"bundleName": "plain-draggable"
}
]
- I had a problem with multiple handles after change detection.
The library owner helped me resolve it. You are welcome to read the description on github, but TLDR, it works now.
Check out the compoinent
drag-us
. It shows multiple handles, and the way it updates PlainDraggable wrapper. To test it, just change the text of the label that appears beneath all the components. In summary what makes the trick issetTimeout
coupled with seprateing @Input into a getter and setter. The getter calls initialization of the draggables on change.