Skip to content

Commit 8a0015a

Browse files
David-DesmaisonsDavid-Desmaisons
authored
Merge pull request #662 from SortableJS/fix-future-index-bug
Fix for issue #603
2 parents d0c98d6 + fc27084 commit 8a0015a

File tree

9 files changed

+287
-39
lines changed

9 files changed

+287
-39
lines changed

‎.env

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
VUE_APP_SHOW_ALL_EXAMPLES=false

‎.env.local

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
VUE_APP_SHOW_ALL_EXAMPLES=true

‎example/App.vue

Lines changed: 47 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<template>
22
<div id="app">
3-
<a href="https://github.com/SortableJS/Vue.Draggable" target="_blank">
3+
<a
4+
href="https://github.com/SortableJS/Vue.Draggable"
5+
target="_blank"
6+
>
47
<img
58
style="position: fixed; top: 0; right: 0; border: 0; z-index:99999"
69
width="149"
@@ -24,51 +27,50 @@
2427
<a
2528
target="_blank"
2629
href="https://circleci.com/gh/SortableJS/Vue.Draggable"
27-
><img
28-
src="https://circleci.com/gh/SortableJS/Vue.Draggable.svg?style=shield"
29-
/>
30+
><img src="https://circleci.com/gh/SortableJS/Vue.Draggable.svg?style=shield" />
3031
</a>
3132
<a
3233
target="_blank"
3334
href="https://codecov.io/gh/SortableJS/Vue.Draggable"
34-
><img
35-
src="https://codecov.io/gh/SortableJS/Vue.Draggable/branch/master/graph/badge.svg"
36-
/>
35+
><img src="https://codecov.io/gh/SortableJS/Vue.Draggable/branch/master/graph/badge.svg" />
3736
</a>
3837
<a
3938
target="_blank"
4039
href="https://codebeat.co/projects/github-com-sortablejs-vue-draggable-master"
41-
><img
42-
src="https://codebeat.co/badges/7a6c27c8-2d0b-47b9-af55-c2eea966e713"
43-
/>
40+
><img src="https://codebeat.co/badges/7a6c27c8-2d0b-47b9-af55-c2eea966e713" />
4441
</a>
4542
<a
4643
target="_blank"
4744
href="https://github.com/SortableJS/Vue.Draggable/issues?q=is%3Aopen+is%3Aissue"
48-
><img
49-
src="https://img.shields.io/github/issues/SortableJS/Vue.Draggable.svg"
50-
/>
45+
><img src="https://img.shields.io/github/issues/SortableJS/Vue.Draggable.svg" />
5146
</a>
52-
<a target="_blank" href="https://www.npmjs.com/package/vuedraggable"
53-
><img src="https://img.shields.io/npm/dt/vuedraggable.svg" />
47+
<a
48+
target="_blank"
49+
href="https://www.npmjs.com/package/vuedraggable"
50+
><img src="https://img.shields.io/npm/dt/vuedraggable.svg" />
5451
</a>
55-
<a target="_blank" href="https://www.npmjs.com/package/vuedraggable"
56-
><img src="https://img.shields.io/npm/dm/vuedraggable.svg" />
52+
<a
53+
target="_blank"
54+
href="https://www.npmjs.com/package/vuedraggable"
55+
><img src="https://img.shields.io/npm/dm/vuedraggable.svg" />
5756
</a>
58-
<a target="_blank" href="https://www.npmjs.com/package/vuedraggable"
59-
><img src="https://img.shields.io/npm/v/vuedraggable.svg" />
57+
<a
58+
target="_blank"
59+
href="https://www.npmjs.com/package/vuedraggable"
60+
><img src="https://img.shields.io/npm/v/vuedraggable.svg" />
6061
</a>
6162
<a
6263
target="_blank"
6364
href="https://github.com/SortableJS/Vue.Draggable/blob/master/LICENSE"
64-
><img
65-
src="https://img.shields.io/github/license/SortableJS/Vue.Draggable.svg"
66-
/>
65+
><img src="https://img.shields.io/github/license/SortableJS/Vue.Draggable.svg" />
6766
</a>
6867
</div>
6968
</div>
7069

71-
<ul class="nav nav-tabs" role="tablist">
70+
<ul
71+
class="nav nav-tabs"
72+
role="tablist"
73+
>
7274
<li
7375
class="nav-item"
7476
v-for="component in componentList"
@@ -81,12 +83,14 @@
8183
:href="`#${component.name}`"
8284
role="tab"
8385
aria-controls="profile"
84-
>{{ component.display }}</a
85-
>
86+
>{{ component.display }}</a>
8687
</li>
8788
</ul>
8889

89-
<div class="tab-content" id="tab-content">
90+
<div
91+
class="tab-content"
92+
id="tab-content"
93+
>
9094
<div
9195
class="tab-pane show"
9296
:id="component.name"
@@ -127,13 +131,29 @@
127131
import $ from "jquery";
128132
129133
const requireContext = require.context("./components/", false, /\.vue$/);
130-
131134
const components = requireContext.keys().reduce((acc, key) => {
132135
const component = requireContext(key).default;
133136
acc[component.name] = component;
134137
return acc;
135138
}, {});
136139
140+
const showAll = process.env.VUE_APP_SHOW_ALL_EXAMPLES === "true";
141+
if (showAll) {
142+
const order = Object.keys(components);
143+
const requireContextDebug = require.context(
144+
"./debug-components/",
145+
false,
146+
/\.vue$/
147+
);
148+
requireContextDebug.keys().reduce((acc, key) => {
149+
const component = requireContextDebug(key).default;
150+
component.order += order;
151+
component.display = `DEBUG: ${component.display}`;
152+
acc[component.name] = component;
153+
return acc;
154+
}, components);
155+
}
156+
137157
export default {
138158
name: "app",
139159
components,

‎example/components/simple.vue

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,14 @@
77
role="group"
88
aria-label="Basic example"
99
>
10-
<button class="btn btn-secondary" @click="add">Add</button>
11-
<button class="btn btn-secondary" @click="replace">Replace</button>
10+
<button
11+
class="btn btn-secondary"
12+
@click="add"
13+
>Add</button>
14+
<button
15+
class="btn btn-secondary"
16+
@click="replace"
17+
>Replace</button>
1218
</div>
1319

1420
<div class="form-check">
@@ -18,7 +24,10 @@
1824
v-model="enabled"
1925
class="form-check-input"
2026
/>
21-
<label class="form-check-label" for="disabled">DnD enabled</label>
27+
<label
28+
class="form-check-label"
29+
for="disabled"
30+
>DnD enabled</label>
2231
</div>
2332
</div>
2433
</div>
@@ -31,6 +40,7 @@
3140
:disabled="!enabled"
3241
class="list-group"
3342
ghost-class="ghost"
43+
:move="checkMove"
3444
@start="dragging = true"
3545
@end="dragging = false"
3646
>
@@ -44,7 +54,11 @@
4454
</draggable>
4555
</div>
4656

47-
<rawDisplayer class="col-3" :value="list" title="List" />
57+
<rawDisplayer
58+
class="col-3"
59+
:value="list"
60+
title="List"
61+
/>
4862
</div>
4963
</template>
5064

@@ -80,6 +94,9 @@ export default {
8094
},
8195
replace: function() {
8296
this.list = [{ name: "Edgard", id: id++ }];
97+
},
98+
checkMove: function(e) {
99+
window.console.log("Future index: " + e.draggedContext.futureIndex);
83100
}
84101
}
85102
};

‎example/debug-components/future-index.vue

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<template>
2+
<div class="row">
3+
<div class="col-2">
4+
<div class="form-group">
5+
<div
6+
class="btn-group-vertical buttons"
7+
role="group"
8+
aria-label="Basic example"
9+
>
10+
<button
11+
class="btn btn-secondary"
12+
@click="add"
13+
>Add</button>
14+
<button
15+
class="btn btn-secondary"
16+
@click="replace"
17+
>Replace</button>
18+
</div>
19+
20+
<div class="form-check">
21+
<input
22+
id="disabled"
23+
type="checkbox"
24+
v-model="enabled"
25+
class="form-check-input"
26+
/>
27+
<label
28+
class="form-check-label"
29+
for="disabled"
30+
>DnD enabled</label>
31+
</div>
32+
</div>
33+
</div>
34+
35+
<div class="col-6">
36+
<h3>Draggable</h3>
37+
38+
<draggableList
39+
:list="list"
40+
:enabled="enabled"
41+
/>
42+
</div>
43+
44+
<rawDisplayer
45+
class="col-3"
46+
:value="list"
47+
title="List"
48+
/>
49+
</div>
50+
</template>
51+
52+
<script>
53+
import draggableList from "./nested/draggable-list";
54+
55+
let id = 1;
56+
export default {
57+
name: "future-index",
58+
display: "Future index",
59+
order: 1,
60+
debug: true,
61+
components: {
62+
draggableList
63+
},
64+
data() {
65+
return {
66+
enabled: true,
67+
list: [
68+
{ name: "John", id: 0 },
69+
{ name: "Joao", id: 1 },
70+
{ name: "Jean", id: 2 }
71+
],
72+
};
73+
},
74+
methods: {
75+
add: function() {
76+
this.list.push({ name: "Juan " + id, id: id++ });
77+
},
78+
replace: function() {
79+
this.list = [{ name: "Edgard", id: id++ }];
80+
}
81+
}
82+
};
83+
</script>
84+
<style scoped>
85+
.buttons {
86+
margin-top: 35px;
87+
}
88+
89+
.ghost {
90+
opacity: 0.5;
91+
background: #c8ebfb;
92+
}
93+
</style>

‎example/debug-components/nested/draggable-list.vue

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<template>
2+
3+
<draggable
4+
:list="list"
5+
:disabled="!enabled"
6+
class="list-group"
7+
ghost-class="ghost"
8+
:move="checkMove"
9+
@start="dragging = true"
10+
@end="dragging = false"
11+
>
12+
<div
13+
class="list-group-item"
14+
v-for="element in list"
15+
:key="element.name"
16+
>
17+
{{ element.name }}
18+
</div>
19+
</draggable>
20+
</template>
21+
22+
<script>
23+
import draggable from "@/vuedraggable";
24+
let id = 1;
25+
export default {
26+
name: "draggable-list",
27+
components: {
28+
draggable
29+
},
30+
props: {
31+
list: {
32+
type: Array,
33+
required: true
34+
},
35+
enabled: {
36+
type: Boolean,
37+
required: true
38+
}
39+
},
40+
data() {
41+
return {
42+
dragging: false
43+
};
44+
},
45+
computed: {
46+
draggingInfo() {
47+
return this.dragging ? "under drag" : "";
48+
}
49+
},
50+
methods: {
51+
add: function() {
52+
this.list.push({ name: "Juan " + id, id: id++ });
53+
},
54+
replace: function() {
55+
this.list = [{ name: "Edgard", id: id++ }];
56+
},
57+
checkMove: function(e) {
58+
window.console.log("Future index: " + e.draggedContext.futureIndex);
59+
}
60+
}
61+
};
62+
</script>
63+
<style scoped>
64+
.ghost {
65+
opacity: 0.5;
66+
background: #c8ebfb;
67+
}
68+
</style>

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"main": "dist/vuedraggable.umd.min.js",
77
"private": false,
88
"scripts": {
9-
"serve": "vue-cli-service serve ./example/main.js --open",
9+
"serve": "vue-cli-service serve ./example/main.js --open --mode local",
1010
"build:doc": "vue-cli-service build ./example/main.js --dest docs --mode development",
1111
"build": "vue-cli-service build --name vuedraggable --entry ./src/vuedraggable.js --target lib",
1212
"lint": "vue-cli-service lint src example",

0 commit comments

Comments
 (0)