Skip to content

Commit 176556a

Browse files
David-DesmaisonsDavid-Desmaisons
committed
First version of correction of issue #8 
1 parent 4f4c609 commit 176556a

File tree

7 files changed

+182
-30
lines changed

7 files changed

+182
-30
lines changed

‎dist/vuedragablefor.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/complex.html renamed to ‎examples/Two_Lists.html

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,14 @@ <h1>Vue Dragable For</h1>
1717
<div class="drag">
1818
<h2>List 1 v-dragable-for</h2>
1919
<div class="dragArea" >
20-
<div v-dragable-for="element in list1" options='{"group":"people"}'>
21-
{{element.name}}
20+
<div v-dragable-for="element in list1" options='{"group":"people"}' >
21+
{{element.name}} {{$index}}
2222
</div>
2323
</div>
2424

2525
<h2>List 2 v-dragable-for</h2>
2626
<div class="dragArea">
27-
<div v-dragable-for="element in list2" options='{"group":"people"}'>{{element.name}}</div>
27+
<div v-dragable-for="element in list2" options='{"group":"people"}' track-by="$index">{{element.name}}</div>
2828
</div>
2929
</div>
3030

@@ -41,7 +41,8 @@ <h2>List 2 v-for</h2>
4141
</div>
4242

4343
<a href="index.html">See basic example</a>
44-
<a href="complex-clone.html">See clone element example</a>
44+
<a href="Two_Lists_Clone.html">See clone element example</a>
45+
<a href="Two_Lists_Clone_If.html">See clone v-if element example</a>
4546

4647
<script type="text/javascript" src="..\libs\vue\dist\vue.js"></script>
4748
<script type="text/javascript" src="..\libs\lodash\lodash.js"></script>

‎examples/complex-clone.html renamed to ‎examples/Two_Lists_Clone.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ <h1>Vue Dragable For</h1>
1818
<h2>List 1 v-dragable-for</h2>
1919
<div id="list1" class="dragArea" >
2020
<div v-dragable-for="element in list1" options='{"group":{ "name":"people", "pull":"clone", "put":false }}' track-by="$index">
21-
{{element.name}}
21+
{{element.name}} {{$index}}
2222
</div>
2323
</div>
2424

@@ -41,7 +41,8 @@ <h2>List 2 v-for</h2>
4141
</div>
4242

4343
<a href="index.html">See basic example</a>
44-
<a href="complex.html">See 2 lists example</a>
44+
<a href="Two_Lists.html">See 2 lists example</a>
45+
<a href="Two_Lists_Clone_If.html">See clone v-if element example</a>
4546

4647
<script type="text/javascript" src="..\libs\vue\dist\vue.js"></script>
4748
<script type="text/javascript" src="..\libs\lodash\lodash.js"></script>

‎examples/Two_Lists_Clone_If.html

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!doctype html>
2+
<html class="no-js" lang="">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="x-ua-compatible" content="ie=edge">
6+
<title>Example two lists clone</title>
7+
<meta name="description" content="">
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
10+
<link rel="stylesheet" href="css/main.css">
11+
</head>
12+
<body>
13+
14+
<div id="main">
15+
<h1>Vue Dragable For</h1>
16+
17+
<div class="drag">
18+
<h2>List 1 v-dragable-for</h2>
19+
<div id="list1" class="dragArea" >
20+
<div v-dragable-for="element in list1" options='{"group":{ "name":"people", "pull":"clone","put":false}}' v-if="element.id > 2">
21+
{{element.name}}
22+
</div>
23+
</div>
24+
25+
<h2>List 2 v-dragable-for</h2>
26+
<div id="list2" class="dragArea">
27+
<div v-dragable-for="element in list2" options='{"group":"people"}' track-by="$index">{{element.name}}</div>
28+
<!-- -->
29+
</div>
30+
</div>
31+
32+
<div class="normal">
33+
<h2>List 1 v-for</h2>
34+
<div>
35+
<div v-for="element in list1" track-by="$index">{{element.name}}</div>
36+
</div>
37+
38+
<h2>List 2 v-for</h2>
39+
<div>
40+
<div v-for="element in list2" track-by="$index">{{element.name}}</div>
41+
</div>
42+
</div>
43+
44+
<a href="index.html">See basic example</a>
45+
<a href="Two_Lists.html">See 2 lists example</a>
46+
<a href="Two_Lists.html">See 2 lists example</a>
47+
48+
<script type="text/javascript" src="..\libs\vue\dist\vue.js"></script>
49+
<script type="text/javascript" src="..\libs\lodash\lodash.js"></script>
50+
<script type="text/javascript" src="..\libs\Sortable\Sortable.js"></script>
51+
<script type="text/javascript" src="src\vuedragablefor.js"></script>
52+
<script type="text/javascript" src="script\complex.js"></script>
53+
54+
</div>
55+
</body>
56+
</html>

‎examples/Two_Lists_If.html

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!doctype html>
2+
<html class="no-js" lang="">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="x-ua-compatible" content="ie=edge">
6+
<title>Example two lists clone</title>
7+
<meta name="description" content="">
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
10+
<link rel="stylesheet" href="css/main.css">
11+
</head>
12+
<body>
13+
14+
<div id="main">
15+
<h1>Vue Dragable For</h1>
16+
17+
<div class="drag">
18+
<h2>List 1 v-dragable-for</h2>
19+
<div id="list1" class="dragArea" >
20+
<div v-dragable-for="element in list1" options='{"group":{ "name":"people", "put":false}}' v-if="element.id > 2">
21+
{{element.name}} {{$index}}
22+
</div>
23+
</div>
24+
25+
<h2>List 2 v-dragable-for</h2>
26+
<div id="list2" class="dragArea">
27+
<div v-dragable-for="element in list2" options='{"group":"people"}' track-by="$index">{{element.name}}</div>
28+
</div>
29+
</div>
30+
31+
<div class="normal">
32+
<h2>List 1 v-for</h2>
33+
<div>
34+
<div v-for="element in list1" track-by="$index">{{element.name}}</div>
35+
</div>
36+
37+
<h2>List 2 v-for</h2>
38+
<div>
39+
<div v-for="element in list2" track-by="$index">{{element.name}}</div>
40+
</div>
41+
</div>
42+
43+
<a href="index.html">See basic example</a>
44+
<a href="Two_Lists.html">See 2 lists example</a>
45+
<a href="Two_Lists.html">See 2 lists example</a>
46+
47+
<script type="text/javascript" src="..\libs\vue\dist\vue.js"></script>
48+
<script type="text/javascript" src="..\libs\lodash\lodash.js"></script>
49+
<script type="text/javascript" src="..\libs\Sortable\Sortable.js"></script>
50+
<script type="text/javascript" src="src\vuedragablefor.js"></script>
51+
<script type="text/javascript" src="script\complex.js"></script>
52+
53+
</div>
54+
</body>
55+
</html>

‎examples/index.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ <h1>Vue Dragable For</h1>
1717
<div class="drag">
1818
<h2>Dragable v-dragable-for</h2>
1919
<div class="dragArea">
20-
<div v-dragable-for="element in list">{{element.name}}</div>
20+
<div v-dragable-for="element in list">{{element.name}} {{$index}}</div>
2121
</div>
2222
</div>
2323

@@ -33,8 +33,9 @@ <h2>Normal v-for</h2>
3333

3434
<br>
3535

36-
<a href="complex.html">See 2 lists example</a>
37-
<a href="complex-clone.html">See clone element example</a>
36+
<a href="Two_Lists.html">See 2 lists example</a>
37+
<a href="Two_Lists_Clone.html">See clone element example</a>
38+
<a href="Two_Lists_Clone_If.html">See clone v-if element example</a>
3839

3940
<script type="text/javascript" src="..\libs\vue\dist\vue.js"></script>
4041
<script type="text/javascript" src="..\libs\lodash\lodash.js"></script>

‎src/vuedragablefor.js

Lines changed: 58 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,28 @@
2222
return getCollectionFragment(fr.parentFrag);
2323
}
2424

25-
function getVmObject(evt){
26-
var fragment = getCollectionFragment(getFragment(evt.item));
27-
return fragment.raw;
25+
function getRootFragment(elt){
26+
return getCollectionFragment(getFragment(elt));
2827
}
2928

30-
function updatePosition(collection, newIndex, oldIndex ){
31-
if (!!collection){
32-
collection.splice(newIndex, 0, collection.splice(oldIndex, 1)[0] );
33-
}
29+
function getVmObject(elt){
30+
var fragment = getRootFragment(elt);
31+
return fragment.scope.element;
32+
}
33+
34+
function removeNode(node){
35+
node.parentElement.removeChild(node);
36+
}
37+
38+
function insertNodeAt(fatherNode, node, position){
39+
if (position<fatherNode.children.length)
40+
fatherNode.insertBefore(node, fatherNode.children[position]);
41+
else
42+
fatherNode.appendChild(node);
43+
}
44+
45+
function computeIndexes(nodes){
46+
return nodes.map(getRootFragment).filter(function(elt){return !!elt;}).map(function (elt){return (elt).scope.$index;}).value();
3447
}
3548

3649
var vueDragFor = {
@@ -43,30 +56,55 @@
4356
bind : function () {
4457
var ctx = this;
4558
var options = this.params.options;
59+
var indexes;
60+
61+
function updatePosition(collection, newIndex, oldIndex ){
62+
var realnew = indexes[newIndex], realOld = indexes[oldIndex];
63+
if (!!collection){
64+
collection.splice(realnew, 0, collection.splice(realOld, 1)[0] );
65+
}
66+
}
67+
4668
options = _.isString(options)? JSON.parse(options) : options;
4769
options = _.merge(options,{
70+
onStart: function (evt) {
71+
indexes = computeIndexes(_.chain(evt.from.children));
72+
},
4873
onUpdate: function (evt) {
4974
updatePosition(ctx.collection, evt.newIndex, evt.oldIndex);
5075
},
51-
onAdd: function (evt) {
76+
onAdd: function (evt) {
77+
indexes = computeIndexes(_.chain(evt.to.children).filter(function(elt){return elt!==evt.item;}));
78+
console.log(indexes);
5279
if (!!ctx.collection){
53-
var addElement= getVmObject(evt);
54-
ctx.collection.splice(evt.newIndex, 0, addElement);
80+
var addElement= getVmObject(evt.item);
81+
var length = indexes.length;
82+
if (evt.newIndex>= length){
83+
ctx.collection.push(addElement);
84+
}
85+
else{
86+
var newIndex = indexes[evt.newIndex];
87+
ctx.collection.splice(newIndex, 0, addElement);
88+
}
5589
}
5690
},
5791
onRemove: function (evt) {
5892
var collection = ctx.collection;
59-
if (!!collection && !evt.clone)
60-
collection.splice(evt.oldIndex, 1);
61-
if (!!evt.clone){
62-
//if cloning mode: replace cloned element by orginal element (with original vue binding information)+
63-
//re-order element as sortablejs may re-order without sending events
64-
var newIndex = _.indexOf(evt.from.children, evt.clone), oldIndex = evt.oldIndex;
65-
evt.from.replaceChild(evt.item, evt.clone);
66-
if (newIndex != oldIndex){
67-
updatePosition(collection, newIndex, oldIndex);
68-
}
93+
if (!!collection && !evt.clone){
94+
var realOld = indexes[evt.oldIndex];
95+
collection.splice(realOld, 1);
96+
}
97+
if (!!evt.clone){
98+
removeNode(evt.clone);
99+
insertNodeAt(evt.from, evt.item, evt.oldIndex)
69100
}
101+
else{
102+
//remove added node: Vue will add it for us
103+
var elt = evt.item
104+
if (!!getFragment(elt).parentFrag){
105+
removeNode(elt);
106+
}
107+
}
70108
}
71109
});
72110
var parent = (!!this.params.root) ? document.getElementById(this.params.root) : this.el.parentElement;

0 commit comments

Comments
 (0)