angular - 使用 mousedown HostListener 移动元素(拖放)

Question

我们需要创建一个 drag and drop指示。使用 drag and drop events不适用于 SVG 元素，因此，我们需要使用标准 mousedown , mousemove和 mouseup事件。我在 JavaScript 中看到了一些示例，但不知何故我无法使用 Angular。
mousemove可拖动元素没有被选中。

如何选择元素并使用 HostListener 拖动它mousemove ?

我创建了一个 StackBlitz所以你可以看到我做了什么。如果我拖动元素并打开控制台，您将看到 mousemove事件不会被触发。

我错过了什么？

Answer 1

由于事件卡住，我支持一种简单的解决方法。

显然，第一个目标是阻止事件preventdefault .
在您的 hostListener ，它支持您的 event .

event.preventDefault();

另外，更简单的方法是 return false这将是中断。

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