diff --git a/README.md b/README.md index 9329794..bce64f5 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ Demo: http://rubaxa.github.io/Sortable/ * Supports drag handles *and selectable text* (better than voidberg's html5sortable) * Smart auto-scrolling * Built using native HTML5 drag and drop API - * Supports [Meteor](https://github.com/SortableJS/meteor), [AngularJS](#ng), [React](#react) and [Polymer](#polymer) + * Supports [Meteor](https://github.com/SortableJS/meteor), [AngularJS](#ng), [React](#react), [Knockout](https://github.com/SortableJS/knockout-sortablejs) and [Polymer](#polymer) * Supports any CSS library, e.g. [Bootstrap](#bs) * Simple API * [CDN](#cdn) @@ -62,22 +62,23 @@ 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 dragClass: "sortable-drag", // Class name for the dragging 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 - fallbackOnBody: false // Appends the cloned DOM Element into the Document's Body + + 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 fallbackTolerance: 0 // Specify in pixels how far the mouse should move before it's considered as a drag. scroll: true, // or HTMLElement scrollFn: function(offsetX, offsetY, originalEvent) { ... }, // if you have custom scrollbar scrollFn may be used for autoscrolling scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling. scrollSpeed: 10, // px - + setData: function (dataTransfer, dragEl) { dataTransfer.setData('Text', dragEl.textContent); }, @@ -91,7 +92,7 @@ var sortable = new Sortable(el, { onStart: function (/**Event*/evt) { evt.oldIndex; // element index within parent }, - + // Element dragging ended onEnd: function (/**Event*/evt) { evt.oldIndex; // element's old index within parent @@ -125,7 +126,7 @@ var sortable = new Sortable(el, { onFilter: function (/**Event*/evt) { var itemEl = evt.item; // HTMLElement receiving the `mousedown|tapstart` event. }, - + // Event when you move an item in the list or between lists onMove: function (/**Event*/evt, /**Event*/originalEvent) { // Example: http://jsbin.com/tuyafe/1/edit?js,output @@ -330,7 +331,7 @@ Dragging only starts if you move the pointer past a certain tolerance, so that y If set to `true`, the page (or sortable-area) scrolls when coming to an edge. Demo: - - `window`: http://jsbin.com/boqugumiqi/1/edit?html,js,output + - `window`: http://jsbin.com/boqugumiqi/1/edit?html,js,output - `overflow: hidden`: http://jsbin.com/kohamakiwi/1/edit?html,js,output @@ -507,33 +508,64 @@ ReactDOM.render(
, 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) ---- - - - -### Support KnockoutJS -Include [knockout-sortable.js](knockout-sortable.js) - -```html -
- -
- -
- -
+```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 ( +
+
+

Group 1

+
+
Swap them around
+
Swap us around
+
Swap things around
+
Swap everything around
+
+
+
+

Group 2

+
+
Swap them around
+
Swap us around
+
Swap things around
+
Swap everything around
+
+
+
+ ); + } +} ``` -Using this bindingHandler sorts the observableArray when the user sorts the HTMLElements. - -The sortable/draggable bindingHandlers supports the same syntax as Knockouts built in [template](http://knockoutjs.com/documentation/template-binding.html) binding except for the `data` option, meaning that you could supply the name of a template or specify a separate templateEngine. The difference between the sortable and draggable handlers is that the draggable has the sortable `group` option set to `{pull:'clone',put: false}` and the `sort` option set to false by default (overridable). - -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. - - --- @@ -546,7 +578,7 @@ Other attributes are: - + ``` ### Method @@ -607,7 +639,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('|') : []; }, @@ -617,7 +649,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('|')); } } }) @@ -730,13 +762,13 @@ Now you can use `jquery.fn.sortable.js`:
```js $("#list").sortable({ /* options */ }); // init - + $("#list").sortable("widget"); // get Sortable instance - + $("#list").sortable("destroy"); // destroy Sortable instance - + $("#list").sortable("{method-name}"); // call an instance method - + $("#list").sortable("{method-name}", "foo", "bar"); // call an instance method with parameters ``` @@ -747,7 +779,7 @@ And `grunt jquery:mySortableFunc` → `jquery.fn.mySortableFunc.js` ### Contributing (Issue/PR) -Please, [read this](CONTRIBUTING.md). +Please, [read this](CONTRIBUTING.md). --- diff --git a/Sortable.html b/Sortable.html index 77994ce..6c3e12d 100644 --- a/Sortable.html +++ b/Sortable.html @@ -11,7 +11,7 @@ is: "sortable-js", properties: { - group : { type: String, value: function() { return Math.random() }, observer: "groupChanged" }, + group : { type: String, value: function() { return Math.random(); }, observer: "groupChanged" }, sort : { type: Boolean, value: true, observer: "sortChanged" }, disabled : { type: Boolean, value: false, observer: "disabledChanged" }, store : { type: Object, value: null, observer: "storeChanged" }, @@ -55,6 +55,18 @@ // hello //