Merge pull request #16 from cyclejs-community/manyFixes

Fix mousemove bug, ghost offset bug, requiring children if no handle …

Author: jvanbruegge

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/parentSelector/css/main.css

@@ -13,6 +13,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

@@ -5,26 +5,33 @@ import { ul, li, makeDOMDriver, DOMSource, VNode } from '@cycle/dom';
 import { makeSortable } from '../../../src/makeSortable';
 
 type Sources = {
-    DOM : DOMSource;
+    DOM: DOMSource;
 };
 
 type Sinks = {
-    DOM : Stream<VNode>;
+    DOM: Stream<VNode>;
 };
 
-function main({ DOM } : Sources) : Sinks
-{
-    const vdom$ : Stream<VNode> = xs.of(
-        ul('.ul', [
-            li('.li', '', ['Option 1']),
-            li('.li', '', ['Option 2']),
-            li('.li', '', ['Option 3']),
-            li('.li', '', ['Option 4']),
-            li('.li', '', ['Option 5']),
-            li('.li', '', ['Option 6']),
-        ])
-    )
-    .compose(makeSortable<Stream<VNode>>(DOM));
+function main({ DOM }: Sources): Sinks {
+    const vdom$: Stream<VNode> = xs
+        .of(
+            ul('.ul', [
+                li('.li', '', [
+                    'You have to hold for 500ms to start reordering'
+                ]),
+                li('.li', '', ['Option 2']),
+                li('.li', '', ['Option 3']),
+                li('.li', '', ['Option 4']),
+                li('.li', '', ['Option 5']),
+                li('.li', '', ['Option 6'])
+            ])
+        )
+        .compose(
+            makeSortable<Stream<VNode>>(DOM, {
+                ghostClass: '.ghost',
+                selectionDelay: 500
+            })
+        );
 
     return {
         DOM: vdom$

examples/updateEvent/css/main.css

@@ -13,6 +13,7 @@ body {
 
 ul {
     margin: 0;
+    position: relative;
 }
 
 li {