使用 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
  }
}

使用 mousedown HostListener 移动元素（拖放）

Using mousedown HostListener to move elements around (Drag & Drop)

angular-directive

angular