Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Multidrag and Swap plugin support #153

Open
wants to merge 21 commits into
base: master
Choose a base branch
from
Open

Add Multidrag and Swap plugin support #153

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
c67a92e
feat: port SortableJS/Vue.Draggable#1052
david-mohr Nov 10, 2021
83c7e0f
feat: port the demo
david-mohr Nov 10, 2021
b344007
feat: port the tests
david-mohr Nov 11, 2021
b2b05cd
fix: make sure the only draggable items are children
david-mohr Nov 11, 2021
da2b9c5
chore: upgrade Sortable
david-mohr Nov 11, 2021
3642673
chore: update tests to use new selector
david-mohr Nov 12, 2021
455fd15
chore: run prePublish (remove tsc step)
david-mohr Nov 12, 2021
a01a263
chore: upgrade Sortable to master to add support for avoidImplicitDes…
david-mohr Nov 15, 2021
b6ee32b
chore: lock sortable to a specific release to ensure fixes are available
david-mohr Dec 6, 2021
487d822
fix: include a pre-built version of the unpublished sortablejs master
david-mohr Dec 6, 2021
5b9024e
chore: sortable finally published a new release
david-mohr Mar 22, 2022
1bdd234
fix: slots are functions, check the length of the return value
david-mohr Apr 14, 2022
a79c0e5
feat: get tests working with index that includes header slot
david-mohr May 27, 2022
7fe6d70
feat: add support for Swap plugin
david-mohr May 30, 2022
570ba53
chore: build
david-mohr May 30, 2022
12e0a80
feat: get swap working across multiple lists
david-mohr May 30, 2022
e1621cd
feat: support modelValue updates
david-mohr May 30, 2022
f4bf376
fix: relocate all items before swapping position
david-mohr May 30, 2022
a8fb1a1
fix: update DOM to correctly reflect the state prior to vue.draggable…
david-mohr May 30, 2022
25eb436
feat: add example and build
david-mohr May 30, 2022
584b3be
fix: correctly handle clones in multi mode (thanks @@wayanbray)
david-mohr Sep 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,267 changes: 813 additions & 454 deletions dist/vuedraggable.common.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/vuedraggable.common.js.map
View file
Open in desktop

Large diffs are not rendered by default.

1,267 changes: 813 additions & 454 deletions dist/vuedraggable.umd.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/vuedraggable.umd.js.map
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/vuedraggable.umd.min.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/vuedraggable.umd.min.js.map
View file
Open in desktop

Large diffs are not rendered by default.

0 docs/img/logo.c6a3753c.svg → docs/img/logo.d4fce499.svg
View file
Open in desktop
File renamed without changes
220 changes: 157 additions & 63 deletions docs/js/app.js
View file
Open in desktop

Large diffs are not rendered by default.

4,266 changes: 3,303 additions & 963 deletions docs/js/chunk-vendors.js
View file
Open in desktop

Large diffs are not rendered by default.

85 changes: 85 additions & 0 deletions example/components/multidrag.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
<template>
<div class="row">
<div class="col-3">
<h3>Draggable 1</h3>
<draggable
class="list-group"
:list="list1"
group="people-md"
:multi-drag="true"
selected-class="selected"
@change="log"
@select="log"
@deselect="log"
item-key="name"
>
<template #item="{ element, index }">
<div class="list-group-item">{{ element.name }} {{ index }}</div>
</template>
</draggable>
</div>

<div class="col-3">
<h3>Draggable 2</h3>
<draggable
class="list-group"
:list="list2"
group="people-md"
:multi-drag="true"
selected-class="selected"
@change="log"
@select="log"
@deselect="log"
item-key="name"
>
<template #item="{ element, index }">
<div class="list-group-item">{{ element.name }} {{ index }}</div>
</template>
</draggable>
</div>

<rawDisplayer class="col-3" :value="list1" title="List 1" />

<rawDisplayer class="col-3" :value="list2" title="List 2" />
</div>
</template>

<style scoped>
.selected {
color: red !important;
background-color: rgba(255, 0, 0, 0.2) !important;
}
</style>

<script>
import draggable from "@/vuedraggable";

export default {
name: "multidrag",
display: "Multi Drag",
order: 16,
components: {
draggable
},
data() {
return {
list1: [
{ name: "John", id: 1 },
{ name: "Joao", id: 2 },
{ name: "Jean", id: 3 },
{ name: "Gerard", id: 4 }
],
list2: [
{ name: "Juan", id: 5 },
{ name: "Edgard", id: 6 },
{ name: "Johnson", id: 7 }
]
};
},
methods: {
log: function(evt) {
window.console.log(evt);
}
}
};
</script>
81 changes: 81 additions & 0 deletions example/components/swap.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<template>
<div class="row">
<div class="col-3">
<h3>Draggable 1</h3>
<draggable
class="list-group"
:list="list1"
group="people-md"
:swap="true"
selected-class="selected"
@change="log"
item-key="name"
>
<template #item="{ element, index }">
<div class="list-group-item">{{ element.name }} {{ index }}</div>
</template>
</draggable>
</div>

<div class="col-3">
<h3>Draggable 2</h3>
<draggable
class="list-group"
:list="list2"
group="people-md"
:swap="true"
selected-class="selected"
@change="log"
item-key="name"
>
<template #item="{ element, index }">
<div class="list-group-item">{{ element.name }} {{ index }}</div>
</template>
</draggable>
</div>

<rawDisplayer class="col-3" :value="list1" title="List 1" />

<rawDisplayer class="col-3" :value="list2" title="List 2" />
</div>
</template>

<style scoped>
.selected {
color: red !important;
background-color: rgba(255, 0, 0, 0.2) !important;
}
</style>

<script>
import draggable from "@/vuedraggable";

export default {
name: "swap",
display: "Swap",
order: 16,
components: {
draggable
},
data() {
return {
list1: [
{ name: "John", id: 1 },
{ name: "Joao", id: 2 },
{ name: "Jean", id: 3 },
{ name: "Gerard", id: 4 }
],
list2: [
{ name: "Juan", id: 5 },
{ name: "Edgard", id: 6 },
{ name: "Johnson", id: 7 }
]
};
},
methods: {
log: function(evt) {
window.console.log(evt);
}
}
};
</script>
Loading