Add mobile support

fixes #11

Author: jvanbruegge

src/eventHandlers.ts

@@ -17,7 +17,10 @@ export function handleEvent(node : VNode, event : MouseEvent, options : Sortable
     const eventHandlerMapping : { [type : string]: EventHandler } = {
         'mousedown': mousedownHandler,
         'mouseup': mouseupHandler,
-        'mousemove': mousemoveHandler
+        'mousemove': mousemoveHandler,
+        'touchstart': mousedownHandler,
+        'touchend': mouseupHandler,
+        'touchmove': mousemoveHandler
     };
 
     return eventHandlerMapping[event.type](node, event, options);

src/eventHandlers/mousedown.ts

@@ -9,7 +9,6 @@ import { getIndex, getGhostStyle, findParent, addAttributes, replaceNode, getBod
  * @type {EventHandler}
  */
 export const mousedownHandler : EventHandler = (node, event, options) => {
-    const newNode : VNode = addKeys(node);
     const item : Element = findParent(event.target as Element, options.parentSelector + ' > *');
     const itemRect : ClientRect = item.getBoundingClientRect();
     const mouseOffset : MouseOffset = {
@@ -20,7 +19,7 @@ export const mousedownHandler : EventHandler = (node, event, options) => {
     const body : Element = findParent(event.target as Element, 'body');
     body.setAttribute('style', getBodyStyle());
 
-    const parent : VNode = select(options.parentSelector, newNode)[0];
+    const parent : VNode = select(options.parentSelector, node)[0];
     const index : number = getIndex(item);
 
     const ghostAttrs : { [name : string]: string } = {
@@ -37,8 +36,8 @@ export const mousedownHandler : EventHandler = (node, event, options) => {
         ...items.slice(0, index),
         addAttributes(items[index], { 'style': 'opacity: 0;' }),
         ...items.slice(index + 1),
-        addAttributes(items[index], ghostAttrs)
+            addAttributes({ ...items[index], elm: undefined }, ghostAttrs)
     ].map((c, i) => addAttributes(c, { 'data-index' : i }));
 
-    return replaceNode(newNode, options.parentSelector, { ...parent, children });
+    return replaceNode(node, options.parentSelector, { ...parent, children });
 };

src/makeSortable.ts

@@ -10,6 +10,14 @@ import { emitBetween } from './xstreamHelpers';
 
 export { SortableOptions, Transform, EventHandler, EventDetails } from './definitions';
 
+function augmentEvent(ev : any) : any {
+    const touch : any = (ev as any).touches[0];
+    ev.clientX = touch.clientX;
+    ev.clientY = touch.clientY;
+    return ev;
+}
+
+
 /**
  * Can be composed with a Stream of VNodes to make them sortable via drag&drop
  * @param {DOMSource} dom The preselected root VNode of the sortable, also indicates the area in which the ghost can be dragged
@@ -20,17 +28,27 @@ export function makeSortable<T>(dom : DOMSource, options? : SortableOptions) : (
 {
     return sortable => adapt(
         (xs.fromObservable(sortable as any) as Stream<VNode>)
+        .map(addKeys)
         .map(node => {
             const defaults : SortableOptions = applyDefaults(options || {}, node);
 
-            const mousedown$ : Stream<MouseEvent> = xs.fromObservable(dom.select(defaults.handle).events('mousedown')) as Stream<MouseEvent>;
+            const mousedown$ : Stream<MouseEvent> = xs.merge(
+                xs.fromObservable(dom.select(defaults.handle).events('mousedown')),
+                xs.fromObservable(dom.select(defaults.handle).events('touchstart'))
+                    .map(augmentEvent)
+            ) as Stream<MouseEvent>;
 
-            const mouseup$ : Stream<MouseEvent> = mousedown$
-                .mapTo(xs.fromObservable(dom.select('body').events('mouseup').take(1)))
-                .flatten() as Stream<MouseEvent>;
+            const mouseup$ : Stream<MouseEvent> = xs.merge(
+                    xs.fromObservable(dom.select('body').events('mouseup')).take(1),
+                    xs.fromObservable(dom.select(defaults.handle).events('touchend')).debug('end')
+                ) as Stream<MouseEvent>;
 
             const mousemove$ : Stream<MouseEvent> = mousedown$
-                .mapTo(xs.fromObservable(dom.select('body').events('mousemove')))
+                .mapTo(xs.merge(
+                    xs.fromObservable(dom.select('body').events('mousemove')),
+                    xs.fromObservable(dom.select(defaults.handle).events('touchmove'))
+                        .map(augmentEvent)
+                ))
                 .flatten()
                 .compose(emitBetween(mousedown$, mouseup$)) as Stream<MouseEvent>;
 
@@ -49,9 +67,9 @@ export function makeSortable<T>(dom : DOMSource, options? : SortableOptions) : (
  * @return {Stream<EventDetails>} an object containing the new positions @see EventDetails
  */
 export function getUpdateEvent(dom : DOMSource, parentSelector : string) : Stream<EventDetails>
-{
-    return (dom.select(parentSelector)
-        .events('updateOrder') as Stream<any>)
+    {
+        return (dom.select(parentSelector)
+            .events('updateOrder') as Stream<any>)
         .compose(delay(10)) //Allow mouseup to execute properly
         .map(ev => ev.detail);
-}
+    }