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

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

从W3school的拖放教程中，您可以使用角度事件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));
  }