We need to create a drag and drop
directive. Using drag and drop events
won't work for SVG elements, thus, we need to go for standard mousedown
, mousemove
and mouseup
events. I saw a few examples in JavaScript, but somehow I don't get it working with Angular.
The mousemove
works solong the draggable element is not selected.
How can I pick the element and drag it around with HostListener
mousemove
?
I created a StackBlitz so you can see what I've done. If I drag the element and open the console, you'll see that the mousemove
event won't be fired.
what am I missing?
I supported an easy way to solve because of event stuck.
Apparently, out first goal is stop the event that is preventdefault
.
In your hostListener
, it supported in your event
.
event.preventDefault();
In addition, it got more easy way is return false
and it would be interrupt.
@HostListener('document:mousedown', ['$event'])
onMouseDown(event) {
// we make sure only draggables on the document elements are selected
if (event.target.getAttribute('draggable')) {
console.log('mousedown');
this.currentX = event.clientX;
this.currentY = event.clientY;
this.selectedElement = event.target;
// ##### add this code.
event.preventDefault(); // choose one
// ##### or add this code.
return false; // choose one
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With