From cf9d749b7950af1860be8c394493336725e05867 Mon Sep 17 00:00:00 2001 From: "pc-david\\david.desmaisons" Date: Mon, 25 Jul 2016 18:08:29 -0300 Subject: [PATCH] Fix: issue#7 --- examples/complex-clone.html | 54 +++++++++++++++++++++++++++++++++++++ examples/complex.html | 13 ++++----- examples/index.html | 3 ++- src/vuedragablefor.js | 17 +++++++++--- 4 files changed, 77 insertions(+), 10 deletions(-) create mode 100644 examples/complex-clone.html diff --git a/examples/complex-clone.html b/examples/complex-clone.html new file mode 100644 index 00000000..ece277f4 --- /dev/null +++ b/examples/complex-clone.html @@ -0,0 +1,54 @@ + + + + + + Example two lists clone + + + + + + + +
+

Vue Dragable For

+ +
+

List 1 v-dragable-for

+
+
+ {{element.name}} +
+
+ +

List 2 v-dragable-for

+
+
{{element.name}}
+
+
+ +
+

List 1 v-for

+
+
{{element.name}}
+
+ +

List 2 v-for

+
+
{{element.name}}
+
+
+ + See basic example + See 2 lists example + + + + + + + +
+ + \ No newline at end of file diff --git a/examples/complex.html b/examples/complex.html index 0d299166..0ebaab40 100644 --- a/examples/complex.html +++ b/examples/complex.html @@ -3,7 +3,7 @@ - Example + Example two lists @@ -17,9 +17,9 @@

Vue Dragable For

List 1 v-dragable-for

- +
+ {{element.name}} +

List 2 v-dragable-for

@@ -31,16 +31,17 @@

List 2 v-dragable-for

List 1 v-for

-
{{element.name}}
+
{{element.name}}

List 2 v-for

-
{{element.name}}
+
{{element.name}}
See basic example + See clone element example diff --git a/examples/index.html b/examples/index.html index ad129c98..cc17ff21 100644 --- a/examples/index.html +++ b/examples/index.html @@ -3,7 +3,7 @@ - Example + Basic example @@ -34,6 +34,7 @@

Normal v-for


See 2 lists example + See clone element example diff --git a/src/vuedragablefor.js b/src/vuedragablefor.js index 746ef3b2..bdb77d61 100644 --- a/src/vuedragablefor.js +++ b/src/vuedragablefor.js @@ -28,14 +28,25 @@ if (!!collection) collection.splice(evt.newIndex, 0, collection.splice(evt.oldIndex, 1)[0] ); }, - onAdd: function (evt) { + onAdd: function (evt) { var directive = evt.from.__directive; if ((!!directive) && (!!ctx.collection)) ctx.collection.splice(evt.newIndex, 0, directive.collection[evt.oldIndex]); }, onRemove: function (evt) { - if (!!ctx.collection) - ctx.collection.splice(evt.oldIndex, 1); + var collection = ctx.collection; + if (!!collection && !evt.clone) + collection.splice(evt.oldIndex, 1); + if (!!evt.clone){ + //if cloning mode: replace cloned element by orginal element (with original vue binding information)+ + //re-order element as sortablejs may re-order without sending events + var newIndex = Array.prototype.indexOf.call(evt.from.children, evt.clone), oldIndex = evt.oldIndex; + evt.from.replaceChild(evt.item, evt.clone); + if (!!collection && (newIndex != oldIndex)){ + var item = collection.splice(oldIndex, 1); + collection.splice(newIndex, 0, item[0]); + } + } } }); var parent = (!!this.params.root) ? document.getElementById(this.params.root) : this.el.parentElement;