Verwenden von mousedown HostListener zum Verschieben von Elementen (Drag & Drop)

Question

Wir müssen eine drag and drop Direktive erstellen. Die Verwendung von funktioniert nicht für SVG-Elemente, daher müssen wir uns für die Standard-Ereignisse mousedown, mousemove und mouseup entscheiden. Ich habe ein paar Beispiele in JavaScript gesehen, aber irgendwie funktioniert es nicht mit Angular.

Die Funktion mousemove funktioniert nicht, wenn das ziehbare Element nicht ausgewählt ist. Wie kann ich das Element auswählen und mit mousemove ziehen?

Ich habe eine StackBlitz erstellt, damit Sie sehen können, was ich getan habe. Wenn ich das Element ziehe und die Konsole öffne, sieht man, dass das Ereignis mousemove nicht ausgelöst wird.

was fehlt mir?

Answer 1

Ich unterstützte einen einfachen Weg zu lösen, wegen des Ereignisses stecken.

Anscheinend ist das erste Ziel, das Ereignis zu stoppen, das preventdefault ist. In Ihrem hostListener unterstützt es in Ihrem event.

event.preventDefault(); 

Darüber hinaus wird es einfache Weise return false ist und es würde unterbrechen werden.

@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 
    } 
}