Fix mousemove bug, ghost offset bug, requiring children if no handle option set, remove need for emitBetween, use border-box, add code to implement ghostClass options

Author: ntilwalli

examples/horizontal/css/main.css

@@ -2,6 +2,13 @@
     font-size: 35px;
 }
 
+html {
+    box-sizing: border-box;
+}
+*, *:before, *:after {
+    box-sizing: inherit;
+}
+
 body, html {
     max-height: 100%;
     margin: 0;
@@ -13,6 +20,7 @@ body {
 
 ul {
     margin: 0;
+    position: relative;
 }
 
 li {

examples/simple/css/main.css

@@ -2,6 +2,13 @@
     font-size: 35px;
 }
 
+html {
+    box-sizing: border-box;
+}
+*, *:before, *:after {
+    box-sizing: inherit;
+}
+
 body, html {
     max-height: 100%;
     margin: 0;
@@ -13,13 +20,18 @@ body {
 
 ul {
     margin: 0;
+    position: relative;
 }
 
 li {
-    padding: 5px;
+    /*padding: 5px;*/
     background: lightgray;
 }
 
 li + li {
-    margin-top: 40px;
+    /*margin-top: 5px;*/
+}
+
+.ghost {
+    border: 1px solid black;
 }

examples/simple/src/index.ts

@@ -24,7 +24,7 @@ function main({ DOM } : Sources) : Sinks
             li('.li', '', ['Option 6']),
         ])
     )
-    .compose(makeSortable<Stream<VNode>>(DOM));
+    .compose(makeSortable<Stream<VNode>>(DOM, { ghostClass: '.ghost', selectionDelay: 500 }));
 
     return {
         DOM: vdom$

src/definitions.ts

@@ -29,10 +29,18 @@ export interface SortableOptions {
     /**
      * Optional, has to be a CSS class name
      * Can be used to style the ghost item
-     * @default the first CSS class of the first item
+     * @default string ''
      * @type {string}
      */
     ghostClass?: string;
+
+    /**
+     * Optional, number of milliseconds to
+     * wait after mousedown/touchstart before selecting the item
+     * @default number in milliseconds, defaults to 0
+     * @type {number}
+     */
+    selectionDelay?: number;
 }
 
 /**
@@ -43,6 +51,20 @@ export interface SortableOptions {
 export interface MouseOffset {
     x: number;
     y: number;
+    itemLeft: number;
+    itemTop: number;
+    parentLeft: number;
+    parentTop: number;
+}
+
+/**
+ * Contains the offset from mousedown position
+ * distX and distY increase going down and to the left
+ * @type {StartPositionOffset}
+ */
+export interface StartPositionOffset extends MouseEvent {
+    distX: number;
+    distY: number;
 }
 
 /**

src/eventHandlers/mousedown.ts

@@ -1,12 +1,13 @@
 import { VNode } from '@cycle/dom';
 import { select } from 'snabbdom-selector';
-import { EventHandler, MouseOffset } from '../definitions';
+import { EventHandler, MouseOffset, SortableOptions } from '../definitions';
 
 import {
     getIndex,
     getGhostStyle,
     findParent,
     addAttributes,
+    addGhostClass,
     replaceNode,
     getBodyStyle,
     addKeys
@@ -22,17 +23,22 @@ export const mousedownHandler: EventHandler = (node, event, options) => {
         options.parentSelector + ' > *'
     );
     const itemRect: ClientRect = item.getBoundingClientRect();
+    const parentNode: Element = item.parentElement;
+    const parentRect: ClientRect = parentNode.getBoundingClientRect();
     const mouseOffset: MouseOffset = {
         x: itemRect.left - event.clientX,
-        y: itemRect.top - event.clientY
+        y: itemRect.top - event.clientY,
+        itemLeft: itemRect.left,
+        itemTop: itemRect.top,
+        parentLeft: parentRect.left,
+        parentTop: parentRect.top
     };
 
     const body: Element = findParent(event.target as Element, 'body');
     body.setAttribute('style', getBodyStyle());
 
-    const parent: VNode = addKeys(select(options.parentSelector, node)[0]);
+    const parent: VNode = select(options.parentSelector, node)[0];
     const index: number = getIndex(item);
-
     const ghostAttrs: { [name: string]: string } = {
         'data-mouseoffset': JSON.stringify(mouseOffset),
         'data-itemdimensions': JSON.stringify({
@@ -41,7 +47,7 @@ export const mousedownHandler: EventHandler = (node, event, options) => {
         }),
         'data-itemindex': index.toString(),
         'data-originalIndex': index.toString(),
-        style: getGhostStyle(event, mouseOffset, item)
+        style: getGhostStyle(mouseOffset, item)
     };
 
     const items: VNode[] = parent.children as VNode[];
@@ -50,7 +56,10 @@ export const mousedownHandler: EventHandler = (node, event, options) => {
         ...items.slice(0, index),
         addAttributes(items[index], { style: 'opacity: 0;' }),
         ...items.slice(index + 1),
-        addAttributes({ ...items[index], elm: undefined }, ghostAttrs)
+        addGhostClass(
+            addAttributes({ ...items[index], elm: undefined }, ghostAttrs),
+            options.ghostClass
+        )
     ].map((c, i) => addAttributes(c, { 'data-index': i }));
 
     return replaceNode(node, options.parentSelector, { ...parent, children });

src/eventHandlers/mousemove.ts

@@ -3,6 +3,7 @@ import { select } from 'snabbdom-selector';
 import {
     EventHandler,
     MouseOffset,
+    StartPositionOffset,
     ItemDimensions,
     Intersection
 } from '../definitions';
@@ -24,6 +25,14 @@ export const mousemoveHandler: EventHandler = (node, event, options) => {
     const parent: VNode = select(options.parentSelector, node)[0];
     const ghost: VNode = parent.children[parent.children.length - 1] as VNode;
 
+    // Hack for now.  Immediately after the mouse down event if the mousemove
+    // handler gets called (as in the pointer gets moved very quickly) the ghost
+    // VNode may not have been attached to the element yet causing ghost.elm to
+    // be undefined, in which case we just return the node unchanged
+    if (!ghost.elm) {
+        return node;
+    }
+
     const mouseOffset: MouseOffset = JSON.parse(
         ghost.data.attrs['data-mouseoffset']
     );
@@ -56,9 +65,12 @@ export const mousemoveHandler: EventHandler = (node, event, options) => {
             : -itemIntersection > maxArea - itemArea
               ? maxIntersection[1]
               : itemIndex;
-
     const ghostAttrs: { [attr: string]: string } = {
-        style: updateGhostStyle(event, mouseOffset, ghost.elm as Element),
+        style: updateGhostStyle(
+            event as StartPositionOffset,
+            mouseOffset,
+            ghost.elm as Element
+        ),
         'data-itemindex': newIndex.toString()
     };
 

src/helpers.ts

@@ -4,7 +4,7 @@ import { select, classNameFromVNode } from 'snabbdom-selector';
 import {
     SortableOptions,
     MouseOffset,
-    ItemDimensions,
+    StartPositionOffset,
     Intersection
 } from './definitions';
 
@@ -32,7 +32,8 @@ export function applyDefaults(
             options.parentSelector ||
             '.' + classNameFromVNode(root).split(' ').join('.'),
         handle: options.handle || itemSelector,
-        ghostClass: options.ghostClass || ''
+        ghostClass: options.ghostClass || '',
+        selectionDelay: options.selectionDelay || 0
     };
 }
 
@@ -124,27 +125,26 @@ export function getIndex(node: any): number {
 
 /**
  * Gets the correct style attribute value for the given parameters
- * @param {MouseEvent} event the mouse event that was triggered
+ * @param {StartPositionOffset} event the mouse event that was triggered, enriched with distance information
  * @param {MouseOffset} mouseOffset the offset of the item
  * @param {ClientRect} itemRect the bounding client rect of the item
  * @return {string} the style value
  */
-export function getGhostStyle(
-    event: MouseEvent,
-    mouseOffset: MouseOffset,
-    item: Element
-): string {
+export function getGhostStyle(mouseOffset: MouseOffset, item: Element): string {
     const itemRect: ClientRect = item.getBoundingClientRect();
     return (
-        'z-index: 5; margin: 0; pointer-events: none; position: absolute; width: ' +
+        'z-index: 5; margin: 0; pointer-events: none; position: absolute; ' +
+        'width: ' +
         itemRect.width +
         'px; ' +
         'height: ' +
         itemRect.height +
-        'px; top: ' +
-        (event.clientY + mouseOffset.y + window.screenY) +
-        'px; left: ' +
-        (event.clientX + mouseOffset.x + window.scrollX) +
+        'px; ' +
+        'top: ' +
+        (mouseOffset.itemTop - mouseOffset.parentTop) +
+        'px; ' +
+        'left: ' +
+        (mouseOffset.itemLeft - mouseOffset.parentLeft) +
         'px;'
     );
 }
@@ -153,7 +153,7 @@ export function getGhostStyle(
  * Returns the updated style for this ghost element
  */
 export function updateGhostStyle(
-    event: MouseEvent,
+    event: StartPositionOffset,
     mouseOffset: MouseOffset,
     ghost: Element
 ): string {
@@ -162,9 +162,9 @@ export function updateGhostStyle(
     return (
         prevStyle.substring(0, prevStyle.indexOf(' top:')) +
         ' top: ' +
-        (event.clientY + mouseOffset.y + window.scrollY) +
+        (mouseOffset.itemTop - mouseOffset.parentTop + event.distY) +
         'px; left: ' +
-        (event.clientX + mouseOffset.x + window.scrollX) +
+        (mouseOffset.itemLeft - mouseOffset.parentLeft + event.distX) +
         'px;'
     );
 }
@@ -197,21 +197,40 @@ export function findParent(node: Element, selector: string): Element {
 }
 
 /**
- * Adds the given attribute savely to the VNode
+ * Adds the given attribute safely to the VNode
  * @param {VNode} node the VNode to add the attributes on
  * @param {any} addition the new attributes
  * @return {VNode} the newly created VNode
  */
 export function addAttributes(
     e: VNode,
-    newAttr: { [attr: string]: any }
+    newAttr: { [attr: string]: any },
+    ghostClass?: string
 ): VNode {
     const addition: any = {
         attrs: Object.assign({}, e.data ? e.data.attrs : undefined, newAttr)
     };
     return addToData(e, addition);
 }
 
+/**
+ * Adds the given class safely to the VNode
+ * @param {VNode} node the VNode to add the attributes on
+ * @param {any} addition the css ghost class
+ * @return {VNode} the newly created VNode
+ */
+export function addGhostClass(e: VNode, ghostClass?: string): VNode {
+    const className =
+        ghostClass && ghostClass.length > 1
+            ? ghostClass[0] === '.' ? ghostClass.substring(1) : ghostClass
+            : undefined;
+    const classVal = className ? { [className]: true } : undefined;
+    const addition: any = {
+        class: classVal
+    };
+    return addToData(e, addition);
+}
+
 /**
  * Removes the given attribute from the VNode
  * @param {VNode} node the VNode
@@ -233,7 +252,7 @@ export function removeAttribute(node: VNode, attributeName: string): VNode {
 }
 
 /**
- * Adds the given additions savely to the VNode
+ * Adds the given additions safely to the VNode
  * @param {VNode} node the VNode to add the additions on
  * @param {any} addition the new additions
  * @return {VNode} the newly created VNode