This code hasn't been updated to ng2-dragula version 2. Please follow the migration guide if you are blindly copying this into a project. Or, help out by submitting a PR that updates this to v2.
A working example of using dragula on a touchscreen! Includes:
-
DelayDragDirective:[delayDrag]="200"will force dragula's touchmove handler to wait 200ms before it reacts. Before that time, if you move your finger at all during that delay, touchscreens will interpret it as scrolling, and dragula will never see your drag.delayDragby itself uses a default value of 200. -
A helper CSS class,
.delay-drag-liftedthat is added after the delay. Dragula's own.gu-mirrorisn't added until you move, so this can help you style things appropriately. Seeapp.component.tsfor an example of using it to apply styles to both classes (but not the.gu-transitleft behind). -
An example use of
dom-autoscroller. This is a bit jagged on touchscreens, but it works. -
A normal child element, with no touchmove handler. You might find if you disable
dom-autoscroller(see below) you have issues with iOS Safari dragging and scrolling at the same time. There's a child element with a touchmove handler for comparison.
Created in response to ng2-dragula/597
Run yarn install or npm install.
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.