playground
/
Sortable
mirror of https://github.com/RubaXa/Sortable.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

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

will-change
Lebedev Konstantin 9 years ago
parent
52bde83397 b7cc23841d
commit
05b7d2daee
2 changed files with 120 additions and 42 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 72
      README.md
  2. 68
      Sortable.html

72
README.md
Unescape View File

@ -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
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
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('|'));
}
}
})

68
Sortable.html
Unescape View File

@ -11,27 +11,28 @@
is: "sortable-js",
properties: {
group : { type: String, value: () => 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" },
handle : { type: String, value: null, observer: "handleChanged" },
scrollSensitivity : { type: Number, value: 30, observer: "scrollSensitivityChanged" },
scrollSpeed : { type: Number, value: 10, observer: "scrollSpeedChanged" },
ghostClass : { type: String, value: "sortable-ghost", observer: "ghostClassChanged" },
chosenClass : { type: String, value: "sortable-chosen", observer: "chosenClassChanged" },
ignore : { type: String, value: "a, img", observer: "ignoreChanged" },
filter : { type: Object, value: null, observer: "filterChanged" },
animation : { type: Number, value: 0, observer: "animationChanged" },
dropBubble : { type: Boolean, value: false, observer: "dropBubbleChanged" },
dragoverBubble : { type: Boolean, value: false, observer: "dragoverBubbleChanged" },
dataIdAttr : { type: String, value: "data-id", observer: "dataIdAttrChanged" },
delay : { type: Number, value: 0, observer: "delayChanged" },
forceFallback : { type: Boolean, value: false, observer: "forceFallbackChanged" },
fallbackClass : { type: String, value: "sortable-fallback", observer: "fallbackClassChanged" },
fallbackOnBody : { type: Boolean, value: false, observer: "fallbackOnBodyChanged" },
draggable : {},
scroll : {}
group : { type: String, value: () => 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" },
handle : { type: String, value: null, observer: "handleChanged" },
scrollSensitivity : { type: Number, value: 30, observer: "scrollSensitivityChanged" },
scrollSpeed : { type: Number, value: 10, observer: "scrollSpeedChanged" },
ghostClass : { type: String, value: "sortable-ghost", observer: "ghostClassChanged" },
chosenClass : { type: String, value: "sortable-chosen", observer: "chosenClassChanged" },
ignore : { type: String, value: "a, img", observer: "ignoreChanged" },
filter : { type: Object, value: null, observer: "filterChanged" },
animation : { type: Number, value: 0, observer: "animationChanged" },
dropBubble : { type: Boolean, value: false, observer: "dropBubbleChanged" },
dragoverBubble : { type: Boolean, value: false, observer: "dragoverBubbleChanged" },
dataIdAttr : { type: String, value: "data-id", observer: "dataIdAttrChanged" },
delay : { type: Number, value: 0, observer: "delayChanged" },
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 : {}
},
created() {
@ -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,7 +79,11 @@
this.sortable = Sortable.create(this, Object.assign(options, {
onUpdate: e => {
if (template) {
template.splice("items", e.newIndex, 0, template.splice("items", e.oldIndex, 1)[0])
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() {
this.sortable.destroy()
destroy: function() {
if(this.sortable) {
this.sortable.destroy()
}
},
groupChanged : function(value) { this.sortable && this.sortable.option("group", value) },

Write Preview
Loading…
Cancel
Save