Skip to content

Commit cf9d749

Browse files
author
pc-david\david.desmaisons
committed
Fix: issue#7
1 parent f89f709 commit cf9d749

File tree

4 files changed

+77
-10
lines changed

4 files changed

+77
-10
lines changed

‎examples/complex-clone.html

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
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 }}' track-by="$index">
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+
</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="complex.html">See 2 lists example</a>
45+
46+
<script type="text/javascript" src="..\libs\vue\dist\vue.js"></script>
47+
<script type="text/javascript" src="..\libs\lodash\lodash.js"></script>
48+
<script type="text/javascript" src="..\libs\Sortable\Sortable.js"></script>
49+
<script type="text/javascript" src="src\vuedragablefor.js"></script>
50+
<script type="text/javascript" src="script\complex.js"></script>
51+
52+
</div>
53+
</body>
54+
</html>

‎examples/complex.html

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="utf-8">
55
<meta http-equiv="x-ua-compatible" content="ie=edge">
6-
<title>Example</title>
6+
<title>Example two lists</title>
77
<meta name="description" content="">
88
<meta name="viewport" content="width=device-width, initial-scale=1">
99

@@ -17,9 +17,9 @@ <h1>Vue Dragable For</h1>
1717
<div class="drag">
1818
<h2>List 1 v-dragable-for</h2>
1919
<div class="dragArea" >
20-
<template v-dragable-for="element in list1" options='{"group":"people"}'>
21-
<p>{{element.name}}</p>
22-
</template>
20+
<div v-dragable-for="element in list1" options='{"group":"people"}'>
21+
{{element.name}}
22+
</div>
2323
</div>
2424

2525
<h2>List 2 v-dragable-for</h2>
@@ -31,16 +31,17 @@ <h2>List 2 v-dragable-for</h2>
3131
<div class="normal">
3232
<h2>List 1 v-for</h2>
3333
<div>
34-
<div v-for="element in list1" options='{"group":"people"}'>{{element.name}}</div>
34+
<div v-for="element in list1" >{{element.name}}</div>
3535
</div>
3636

3737
<h2>List 2 v-for</h2>
3838
<div>
39-
<div v-for="element in list2" options='{"group":"people"}'>{{element.name}}</div>
39+
<div v-for="element in list2" >{{element.name}}</div>
4040
</div>
4141
</div>
4242

4343
<a href="index.html">See basic example</a>
44+
<a href="complex-clone.html">See clone element example</a>
4445

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

‎examples/index.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="utf-8">
55
<meta http-equiv="x-ua-compatible" content="ie=edge">
6-
<title>Example</title>
6+
<title>Basic example</title>
77
<meta name="description" content="">
88
<meta name="viewport" content="width=device-width, initial-scale=1">
99

@@ -34,6 +34,7 @@ <h2>Normal v-for</h2>
3434
<br>
3535

3636
<a href="complex.html">See 2 lists example</a>
37+
<a href="complex-clone.html">See clone element example</a>
3738

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

‎src/vuedragablefor.js

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,14 +28,25 @@
2828
if (!!collection)
2929
collection.splice(evt.newIndex, 0, collection.splice(evt.oldIndex, 1)[0] );
3030
},
31-
onAdd: function (evt) {
31+
onAdd: function (evt) {
3232
var directive = evt.from.__directive;
3333
if ((!!directive) && (!!ctx.collection))
3434
ctx.collection.splice(evt.newIndex, 0, directive.collection[evt.oldIndex]);
3535
},
3636
onRemove: function (evt) {
37-
if (!!ctx.collection)
38-
ctx.collection.splice(evt.oldIndex, 1);
37+
var collection = ctx.collection;
38+
if (!!collection && !evt.clone)
39+
collection.splice(evt.oldIndex, 1);
40+
if (!!evt.clone){
41+
//if cloning mode: replace cloned element by orginal element (with original vue binding information)+
42+
//re-order element as sortablejs may re-order without sending events
43+
var newIndex = Array.prototype.indexOf.call(evt.from.children, evt.clone), oldIndex = evt.oldIndex;
44+
evt.from.replaceChild(evt.item, evt.clone);
45+
if (!!collection && (newIndex != oldIndex)){
46+
var item = collection.splice(oldIndex, 1);
47+
collection.splice(newIndex, 0, item[0]);
48+
}
49+
}
3950
}
4051
});
4152
var parent = (!!this.params.root) ? document.getElementById(this.params.root) : this.el.parentElement;

0 commit comments

Comments
 (0)