Skip to content

Commit 198376c

Browse files
David-DesmaisonsDavid-Desmaisons
committed
Fix for issue SortableJS#603 
1 parent d0c98d6 commit 198376c

File tree

9 files changed

+311
-39
lines changed

9 files changed

+311
-39
lines changed

‎.env

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
VUE_APP_SHOW_ALL_EXAMPLES=false

‎.env.local

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
VUE_APP_SHOW_ALL_EXAMPLES=true

‎example/App.vue

+46-27
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,28 @@
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+
acc[component.name] = component;
152+
return acc;
153+
}, components);
154+
}
155+
137156
export default {
138157
name: "app",
139158
components,

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

+68
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>

‎example/components/simple.vue

+21-4
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/nested/draggable-list.vue

+68
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>

0 commit comments

Comments
 (0)