This content originally appeared on DEV Community and was authored by 101samovar
In this article we will drag and drop SVG elements.
Let’s build a site.
Let’s add an SVG with two rectangles.
Let’s add the CSS class to check if the element is draggable.
Add a mousedown event listener for the SVG-element.
First, check if the element has the “draggable” class name.
If so, get the mouse position.
Remember the element we start to drag and its position.
Then start to listen to mousemove events.
On mouse move we get the current mouse position
and we change the element position.
So the element is dragging.
When the mouse button is up we stop to listen to mouse move events.
So the element is dropped.
Let’s check it out.
Drag the rectangle. Drop it.
Drag another one. Drop it.
It works! :)
const svg = document.getElementById('svg');
let startX, startY, elementX, elementY, element;
svg.addEventListener('mousedown', e => {
const className = e.target.getAttributeNS(null, 'class');
if (className.indexOf('draggable') >= 0) {
startX = e.offsetX;
startY = e.offsetY;
element = e.target;
elementX = +element.getAttributeNS(null, 'x');
elementY = +element.getAttributeNS(null, 'y');
svg.addEventListener('mousemove', onMouseMove);
}
});
onMouseMove = e => {
let x = e.offsetX;
let y = e.offsetY;
element.setAttributeNS(null, 'x', elementX + x - startX);
element.setAttributeNS(null, 'y', elementY + y - startY);
};
svg.addEventListener('mouseup', e => {
svg.removeEventListener('mousemove', onMouseMove);
});
I hope you found this article useful, if you need any help please let me know in the comment section.
👋 See you next time. Have a nice day!
Subscribe to our channel:
https://www.youtube.com/c/Samovar101
This content originally appeared on DEV Community and was authored by 101samovar
101samovar | Sciencx (2022-01-02T11:30:08+00:00) Drag and drop SVG elements. Retrieved from https://www.scien.cx/2022/01/02/drag-and-drop-svg-elements/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.