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

[MOVED] https://github.com/SortableJS/polymer-sortablejs.git

pull/612/merge
Lebedev Konstantin 8 years ago
parent
af383bd277
commit
1d2f4b88e7
2 changed files with 6 additions and 184 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. 19
      README.md
  2. 171
      Sortable.html

19
README.md
Unescape View File

@ -12,7 +12,12 @@ 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), [Knockout](https://github.com/SortableJS/knockout-sortablejs) and [Polymer](#polymer)
* Supports
* [Meteor](https://github.com/SortableJS/meteor)
* [AngularJS](#ng)
* [React](#react)
* [Knockout](https://github.com/SortableJS/knockout-sortablejs)
* [Polymer](https://github.com/SortableJS/polymer-sortablejs)
* Supports any CSS library, e.g. [Bootstrap](#bs)
* Simple API
* [CDN](#cdn)
@ -568,18 +573,6 @@ export class SortableExampleEsnext extends React.Component {
---
<a name="polymer"></a>
### Support Polymer
```html
<link rel="import" href="bower_components/Sortable/Sortable-js.html">
<sortable-js handle=".handle">
<template is="dom-repeat" items={{names}}>
<div>{{item}}</div>
</template>
</sortable-js>
```
### Method

171
Sortable.html
Unescape View File

@ -1,171 +0,0 @@
<link rel="import" href="../polymer/polymer.html">
<script src="./Sortable.js"></script>
<dom-module id="sortable-js">
<template>
<content></content>
</template>
</dom-module>
<script>
'use strict';
Polymer({
is: "sortable-js",
properties: {
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" },
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 : {}
},
created: function() {
// override default DOM property behavior
Object.defineProperties(this, {
draggable: { get: function() { return this._draggable || this.getAttribute("draggable") || ">*";}, set: function(value) { this._draggable = value; this.draggableChanged(value);} },
scroll: { get: function() { return this._scroll || JSON.parse(this.getAttribute("scroll") || "true"); }, set: function(value) { this._scroll = value; this.scrollChanged(value);} }
});
},
attached: function() {
// Given
// <sortable-js>
// <template is="dom-repeat" items={{data}}>
// <div>
// <template is="dom-if" if="true">
// <span>hello</span></template></div>
// After render, it becomes
// <sortable-js>
// <div>
// <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];
var options = {};
Object.keys(this.properties).forEach(function(key) {
options[key] = this[key];
}.bind(this));
var _this = this;
var eventCallbacks = {
onUpdate: function (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);
},
onAdd: function(e) {
if (template) {
var froms = e.from.querySelectorAll("template[is='dom-repeat']");
var from = froms[froms.length-1];
var item = from.items[e.oldIndex];
template.splice("items", e.newIndex, 0, item);
}
_this.fire("add", e);
},
onRemove: function(e) {
if (template) {
template.splice("items", e.oldIndex, 1)[0];
}
_this.fire("remove", e);
},
onChoose: function(e) {
_this.fire("choose", e);
},
onStart: function(e) {
_this.fire("start", e);
},
onEnd: function(e) {
_this.fire("end", e);
},
onSort: function(e) {
_this.fire("sort", e);
},
onFilter: function(e) {
_this.fire("filter", e);
},
onMove: function(e) {
_this.fire("move", e);
},
onClone: function(e) {
_this.fire("clone", e);
}
};
Object.keys(eventCallbacks).forEach(function(name){
options[name] = eventCallbacks[name];
});
this.sortable = Sortable.create(this, options);
},
destroy: function() {
if(this.sortable) {
this.sortable.destroy();
}
},
groupChanged : function(value) { this.sortable && this.sortable.option("group", value); },
sortChanged : function(value) { this.sortable && this.sortable.option("sort", value); },
disabledChanged : function(value) { this.sortable && this.sortable.option("disabled", value); },
storeChanged : function(value) { this.sortable && this.sortable.option("store", value); },
handleChanged : function(value) { this.sortable && this.sortable.option("handle", value); },
scrollChanged : function(value) { this.sortable && this.sortable.option("scroll", value); },
scrollSensitivityChanged : function(value) { this.sortable && this.sortable.option("scrollSensitivity", value); },
scrollSpeedChanged : function(value) { this.sortable && this.sortable.option("scrollSpeed", value); },
draggableChanged : function(value) { this.sortable && this.sortable.option("draggable", value); },
ghostClassChanged : function(value) { this.sortable && this.sortable.option("ghostClass", value); },
chosenClassChanged : function(value) { this.sortable && this.sortable.option("chosenClass", value); },
ignoreChanged : function(value) { this.sortable && this.sortable.option("ignore", value); },
filterChanged : function(value) { this.sortable && this.sortable.option("filter", value); },
animationChanged : function(value) { this.sortable && this.sortable.option("animation", value); },
dropBubbleChanged : function(value) { this.sortable && this.sortable.option("dropBubble", value); },
dragoverBubbleChanged : function(value) { this.sortable && this.sortable.option("dragoverBubble", value); },
dataIdAttrChanged : function(value) { this.sortable && this.sortable.option("dataIdAttr", value); },
delayChanged : function(value) { this.sortable && this.sortable.option("delay", value); },
forceFallbackChanged : function(value) { this.sortable && this.sortable.option("forceFallback", value); },
fallbackClassChanged : function(value) { this.sortable && this.sortable.option("fallbackClass", value); },
fallbackOnBodyChanged : function(value) { this.sortable && this.sortable.option("fallbackOnBody", value); }
});
</script>
Write Preview
Loading…
Cancel
Save