touchscreen-dnd-shim

About

This is a fork of a project by Tim Ruffles 'ios-html5-drag-drop-shim', instead of checking for certain user agents it just checks for the ability to create a touch event. Should work across more devices. Tested working in conjunction with ng2-dnd drag library.

Install

npm

npm install touchscreen-dnd-shim

Import CSS

@import "touchscreen-dnd-shim/default.css"

Import into component

import { polyfill } from 'touchscreen-dnd-shim';
...
@Component(...)
export class DragTestComponent implements OnInit {
  ...
  // constructor
  constructor() {
    polyfill({}); // options can be added, see docs for Tim Ruffles project
  }
  ...
  // prevent default on some drag events on dnd-droppable (important!)
  public preventDefault(event) {
    event.mouseEvent.preventDefault();
    return false;
  }
}

Add Directives to drop zones

<div dnd-droppable (onDragEnter)="preventDefault($event)" (onDragOver)="preventDefault($event)" (onDragLeave)="preventDefault($event)">
    draggables drop here
</div>