Question

我需要在移动设备上添加drag&drop事件，touchstart事件按预期触发，但没有明显效果。

那么，是否有可能在touchstart上启动原生拖放事件或者您知道一个示例，例如@HostListener，其中显示了如何处理这个问题？

this.htmlElement.ontouchstart = (touchEvent: TouchEvent) => {
     // here I check if user intend starting a drag&drop or if there are some other touch behaviours

    if (dragging) {
        // What to do here to start drag and drop
    }
}

提前感谢您的回复！

Answer 1

Angular支持拖动，因此您可以像这样使用它们：

<div (drop)="onDrop($event, dropData)" (dragover)="allowDrop($event)"> Drop here</div>
<div (dragstart)="onDragStart($event, dragData)">drag me </div>

https://plnkr.co/edit/xAjNaXvrMouM5q33YoIG?p=info

以下是我猜的所有列表：

(dragleave)
(drag)
(dragend)
(dragenter)
(dragexit)
(dragover)
(dragstart)
(drop)

对于与触摸相关的事件，您应该使用类似HammerJs和Angular2的内容。

Answer 2

在drag and drop上的W3school教程中，您可以使用angular event-bindinds而不是html中的内置绑定。所有以on开头的事件都会被省略，并在其周围添加括号（例如ondrag变为(drag)）。我把w3school的例子写成angular2 plunkr

HTML：

<div id="div1" (drop)="drop($event)" (dragover)="allowDrop($event)"></div>
<br>
<img id="drag1" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" 
draggable="true" (dragstart)="drag($event)" width="336" height="69">

的CSS：

#div1 {
    width: 350px;
    height: 70px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}

TS：

  allowDrop(ev) {
    ev.preventDefault();

  }

  drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);

  }

  drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
  }

在TouchStart本机事件开始拖动 - Angular2

2 个答案: