From 35a8a14115a66c2854ab5bd311d08c667f24d679 Mon Sep 17 00:00:00 2001 From: Daniel Persson Date: Tue, 21 Jun 2016 15:02:57 +0200 Subject: [PATCH] Added manuallyHandleUpdateEvents and documented usage. --- README.md | 24 ++++++++++++------------ Sortable.html | 49 +++++++++++++++++++++++++++---------------------- 2 files changed, 39 insertions(+), 34 deletions(-) diff --git a/README.md b/README.md index c9dfcac..3c30c4a 100644 --- a/README.md +++ b/README.md @@ -65,15 +65,15 @@ var sortable = new Sortable(el, { 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 - + scroll: true, // or HTMLElement 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); }, @@ -82,7 +82,7 @@ var sortable = new Sortable(el, { onStart: function (/**Event*/evt) { evt.oldIndex; // element index within parent }, - + // dragging ended onEnd: function (/**Event*/evt) { evt.oldIndex; // element's old index within parent @@ -116,7 +116,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) { // Example: http://jsbin.com/tuyafe/1/edit?js,output @@ -297,7 +297,7 @@ Demo: http://jsbin.com/pucurizace/edit?html,css,js,output 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 @@ -526,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. --- @@ -723,13 +723,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 ``` @@ -740,7 +740,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 901aa02..43f062d 100644 --- a/Sortable.html +++ b/Sortable.html @@ -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() { @@ -78,7 +79,11 @@ this.sortable = Sortable.create(this, Object.assign(options, { onUpdate: e => { if (template) { - template.items.splice(e.newIndex, 0, template.items.splice(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) },