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移动元素（Drag＆amp; Drop）

1 个答案: