Merge branch 'master' of github.com:RubaXa/Sortable

README.md

@@ -61,14 +61,14 @@ var sortable = new Sortable(el, {
 	animation: 150,  // ms, animation speed moving items when sorting, `0` — without animation
 	handle: ".my-handle",  // Drag handle selector within list items
 	filter: ".ignore-elements",  // Selectors that do not lead to dragging (String or Function)
-	draggable: ".item",  // Specifies which items inside the element should be sortable
+	draggable: ".item",  // Specifies which items inside the element should be draggable
 	ghostClass: "sortable-ghost",  // Class name for the drop placeholder
 	chosenClass: "sortable-chosen",  // Class name for the chosen item
 	dataIdAttr: 'data-id',
 
 	forceFallback: false,  // ignore the HTML5 DnD behaviour and force the fallback to kick in
-	fallbackClass: "sortable-fallback"  // Class name for the cloned DOM Element when using forceFallback
+	fallbackClass: "sortable-fallback",  // Class name for the cloned DOM Element when using forceFallback
-	fallbackOnBody: false  // Appends the cloned DOM Element into the Document's Body
+	fallbackOnBody: false,  // Appends the cloned DOM Element into the Document's Body
 
 	scroll: true, // or HTMLElement
 	scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
@@ -443,6 +443,64 @@ React.render(<div>
 </div>, document.body);
 ```
 
+### Support React ES2015 / TypeScript syntax
+As mixins are not supported in ES2015 / TypeScript syntax here is example of ES2015 ref based implementation.
+Using refs is the preferred (by facebook) "escape hatch" to underlaying DOM nodes: [React: The ref Callback Attribute](https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute)
+
+```js
+import * as React from "react";
+import Sortable from 'sortablejs';
+
+export class SortableExampleEsnext extends React.Component {
+
+  sortableContainersDecorator = (componentBackingInstance) => {
+    // check if backing instance not null
+    if (componentBackingInstance) {
+      let options = {
+        handle: ".group-title" // Restricts sort start click/touch to the specified element
+      };
+      Sortable.create(componentBackingInstance, options);
+    }
+  };
+
+  sortableGroupDecorator = (componentBackingInstance) => {
+    // check if backing instance not null
+    if (componentBackingInstance) {
+      let options = {
+        draggable: "div", // Specifies which items inside the element should be sortable
+        group: "shared"
+      };
+      Sortable.create(componentBackingInstance, options);
+    }
+  };
+
+  render() {
+    return (
+      <div className="container" ref={this.sortableContainersDecorator}>
+        <div className="group">
+          <h2 className="group-title">Group 1</h2>
+          <div className="group-list" ref={this.sortableGroupDecorator}>
+            <div>Swap them around</div>
+            <div>Swap us around</div>
+            <div>Swap things around</div>
+            <div>Swap everything around</div>
+          </div>
+        </div>
+        <div className="group">
+          <h2 className="group-title">Group 2</h2>
+          <div className="group-list" ref={this.sortableGroupDecorator}>
+            <div>Swap them around</div>
+            <div>Swap us around</div>
+            <div>Swap things around</div>
+            <div>Swap everything around</div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+```
+
 
 ---
 
@@ -468,7 +526,7 @@ The sortable/draggable bindingHandlers supports the same syntax as Knockouts bui
 Other attributes are:
 *	options: an object that contains settings for the underlaying sortable, ie `group`,`handle`, events etc.
 *	collection: if your `foreach` array is a computed then you would supply the underlaying observableArray that you would like to sort here.
-
+*   manuallyHandleUpdateEvents: a boolean to turn off the change events on update that other polymer elements listen to.
 
 ---
 
@@ -482,7 +540,7 @@ Other attributes are:
   <template is="dom-repeat" items={{names}}>
     <div>{{item}}</div>
   </template>
-<sortable-js>
+</sortable-js>
 ```
 
 ### Method
@@ -543,7 +601,7 @@ Sortable.create(el, {
 		 * @returns {Array}
 		 */
 		get: function (sortable) {
-			var order = localStorage.getItem(sortable.options.group);
+			var order = localStorage.getItem(sortable.options.group.name);
 			return order ? order.split('|') : [];
 		},
 
@@ -553,7 +611,7 @@ Sortable.create(el, {
 		 */
 		set: function (sortable) {
 			var order = sortable.toArray();
-			localStorage.setItem(sortable.options.group, order.join('|'));
+			localStorage.setItem(sortable.options.group.name, order.join('|'));
 		}
 	}
 })

Sortable.html

@@ -30,6 +30,7 @@
       forceFallback               : { type: Boolean, value: false, observer: "forceFallbackChanged" },
       fallbackClass               : { type: String, value: "sortable-fallback", observer: "fallbackClassChanged" },
       fallbackOnBody              : { type: Boolean, value: false, observer: "fallbackOnBodyChanged" },
+      manuallyHandleUpdateEvents  : { type: Boolean, value: false },
       draggable                   : {},
       scroll                      : {}
     },
@@ -55,6 +56,18 @@
       //       <span>hello</span>
       //       <template is="dom-if">
       //     <tempalte is="dom-repeat">
+
+      this.initialize();
+
+    },
+
+    detached: function() {
+      this.destroy()
+    },
+
+
+    initialize: function() {
+
       var templates = this.querySelectorAll("template[is='dom-repeat']")
       var template = templates[templates.length-1]
 
@@ -66,8 +79,12 @@
       this.sortable = Sortable.create(this, Object.assign(options, {
         onUpdate: e => {
           if (template) {
+            if(manuallyHandleUpdateEvents) {
+              template.items.splice(e.newIndex, 0, template.items.splice(e.oldIndex, 1)[0]);
+            } else {
               template.splice("items", e.newIndex, 0, template.splice("items", e.oldIndex, 1)[0])
             }
+          }
           this.fire("update", e)
         },
 
@@ -108,10 +125,13 @@
           this.fire("move", e)
         }
       }))
+
     },
 
-    detached: function() {
+    destroy: function() {
+      if(this.sortable) {
         this.sortable.destroy()
+      }
     },
 
     groupChanged             : function(value) { this.sortable && this.sortable.option("group", value) },