https://github.com/smaharj1/vue-drag-and-drop-kanban
A simple kanban board where the items can be dragged and dropped from the list. This is a hybrid implementation of vue-smooth-dnd.
Science Score: 10.0%
This score indicates how likely this project is to be science-related based on various indicators:
-
○CITATION.cff file
-
○codemeta.json file
-
○.zenodo.json file
-
○DOI references
-
○Academic publication links
-
✓Committers with academic emails
1 of 2 committers (50.0%) from academic institutions -
○Institutional organization owner
-
○JOSS paper metadata
-
○Scientific vocabulary similarity
Low similarity (10.5%) to scientific vocabulary
Keywords
Keywords from Contributors
Repository
A simple kanban board where the items can be dragged and dropped from the list. This is a hybrid implementation of vue-smooth-dnd.
Basic Info
Statistics
- Stars: 196
- Watchers: 5
- Forks: 27
- Open Issues: 12
- Releases: 9
Topics
Metadata Files
README.md
A simple kanban board where the items can be dragged and dropped from the list. This is a hybrid implementation of vue-smooth-dnd.
Demo
Usage
Installation
To use the vue-drag-n-drop module, you first need to install the module.
npm install vue-drag-n-drop
or
yarn add vue-drag-n-drop
Use Case
``` html
```
{{data.description}}
MyComponent.vue
```html
{{data.title}}
```
Documentation
Instantiating the component
To put the component in your code, you can simply run import DragDrop from 'vue-drag-n-drop';. Then, use it in the code as:
html
<drag-drop
:dropzones="dropGroups"
:dropzonesTitle="'XYZ Company Teams'"
:originalData="stories"
:originalTitle="'Tasks to be distributed'"
/>
originalData in the above code is assumed to be a list of string. However, you can also pass in the list of custom objects like this:
js
[
{
title: 'Strategy 101',
description: 'Create a draft of business plan',
time: '3 days',
done: false
},
{
title: 'Strategy 102',
description: 'Finalize the plan',
time: '4 days',
done: false
}
]
When you pass your own objects instead of a list of string, you also need to provide a custom component to handle view/action of this object since you can virtually pass any kind of object.
Events
When you use the component, you can also listen to some events that happen inside the component like drag, drop, save and cancel
html
<drag-drop
:dropzones="dropGroups"
:dropzonesTitle="'XYZ Company Teams'"
:originalData="stories"
:originalTitle="'Tasks to be distributed'"
@dropInOriginalBucket="originalBucketDropEvent"
@dropInDestinationBucket="destinationBucketDropEvent"
@save="save"
@cancel="cancel"
/>
save - This event is triggered when you click save from inside the component. It gives back the final state of the data in corresponding buckets.
cancel - This gives you a choice on how to handle the cancellationn event.
dropInOriginalBucket - This event is emitted everytime there is a drop event for original bucket. You provides an object with startIndex, endIndex and payload.
dropInDestinationBucket - This event is emitted for each dropzone in the destination bucket. First parameter returns the dropzone name and second parameter returns the drop info startIndex, endIndex and payload.
Custom Component for list of objects
vue-drag-n-drop uses Vue Named Slots. So, the users can pass in custom component that will have access to the data for the single item. You can impolement the slots like below:
```html <drag-drop :dropzones="dropGroups" :dropzonesTitle="'XYZ Company Teams'" :originalData="stories" :originalTitle="'Tasks to be distributed'"
```
Here, dd-card is the slot name. The component provides a cardData variable provides the access of a single object from the original data. If slots aren't used, the component assumes that original data is a list of string. This makes it compatible with older version.
CSS Modification
To modify the CSS style, you can override these css classes from your component:
``` .vue-drag-n-drop # This holds the whole container.
.dd-title # Class for modifying the titles
.dd-first-group # Class to modify the first (original) container. It holds the list of cards
.dd-card-ghost # Class provided for drag class by smooth-dnd
.dd-card-ghost-drop # Class provided for drop by smooth-dnd
.dd-result-group # Class to modify the second drop container (Result container)
.dd-drop-container # Class to modify the style of each column for second container
```
Support for SSR/Nuxt
Currently, Server Side Rendering is not supported. To use it in SSR/Nuxt project, you need to specify Nuxt that this plugin needs to render on the client side.
To specify Nuxt to render it on client-side, create a JS file under ~/plugins/ or add to existing one:
~/plugins/vue-drap-n-drop.js
```
import Vue from 'vue';
import DragDrop from 'vue-drag-n-drop';
Vue.use(DragDrop); ```
Add the plugin to nuxt.config.js
plugins: [
{
src: './plugins/vue-drag-n-drop.js',
ssr: false
}
],
Contributions
Feel free to raise an issue or create a Pull Request if you see ways that can improve this library.
Current Contributors
License
Owner
- Name: Sujil Maharjan
- Login: smaharj1
- Kind: user
- Location: New York, New York
- Company: NBA
- Website: https://smaharj1.github.io/
- Repositories: 6
- Profile: https://github.com/smaharj1
Full Stack dev who has more faith in Vue than *whispers* React. AI & ML enthusiast who likes to get his hands dirty on anything and everything new.
GitHub Events
Total
- Watch event: 7
- Fork event: 2
Last Year
- Watch event: 7
- Fork event: 2
Committers
Last synced: 8 months ago
Top Committers
| Name | Commits | |
|---|---|---|
| Sujil Maharjan | s****1@r****u | 71 |
| dependabot[bot] | 4****] | 24 |
Committer Domains (Top 20 + Academic)
Issues and Pull Requests
Last synced: 6 months ago
All Time
- Total issues: 4
- Total pull requests: 61
- Average time to close issues: 3 months
- Average time to close pull requests: about 1 month
- Total issue authors: 4
- Total pull request authors: 2
- Average comments per issue: 1.5
- Average comments per pull request: 0.07
- Merged pull requests: 47
- Bot issues: 0
- Bot pull requests: 38
Past Year
- Issues: 0
- Pull requests: 0
- Average time to close issues: N/A
- Average time to close pull requests: N/A
- Issue authors: 0
- Pull request authors: 0
- Average comments per issue: 0
- Average comments per pull request: 0
- Merged pull requests: 0
- Bot issues: 0
- Bot pull requests: 0
Top Authors
Issue Authors
- KIlian42 (1)
- ozgurozalp (1)
- KhalilAhmadDanish (1)
- productdevbook (1)
Pull Request Authors
- dependabot[bot] (38)
- smaharj1 (23)
Top Labels
Issue Labels
Pull Request Labels
Packages
- Total packages: 2
-
Total downloads:
- npm 842 last-month
-
Total dependent packages: 0
(may contain duplicates) -
Total dependent repositories: 17
(may contain duplicates) - Total versions: 40
- Total maintainers: 1
proxy.golang.org: github.com/smaharj1/vue-drag-and-drop-kanban
- Documentation: https://pkg.go.dev/github.com/smaharj1/vue-drag-and-drop-kanban#section-documentation
- License: mit
-
Latest release: v1.3.0
published almost 4 years ago
Rankings
npmjs.org: vue-drag-n-drop
A simple kanban board where the items can be dragged and dropped from the list. This is a hybrid implementation of vue-smooth-dnd.
- Homepage: https://github.com/smaharj1/vue-drag-and-drop-kanban#readme
- License: MIT
-
Latest release: 1.3.0
published almost 4 years ago
Rankings
Maintainers (1)
Dependencies
- 1363 dependencies
- @vue/cli-plugin-babel ~4.2.0 development
- @vue/cli-plugin-unit-jest ~4.3.0 development
- @vue/cli-service ~4.2.0 development
- @vue/test-utils 1.0.0-beta.31 development
- rollup ^1.17.0 development
- rollup-plugin-buble ^0.19.8 development
- rollup-plugin-commonjs ^10.0.1 development
- rollup-plugin-vue ^5.0.1 development
- sinon ^9.0.1 development
- vue ^2.6.11 development
- vue-template-compiler ^2.6.11 development
- lodash ^4.17.13
- vue-smooth-dnd ^0.2.1
- 1357 dependencies
- actions/checkout master composite
- actions/setup-node master composite
- pascalgn/npm-publish-action 4f4bf159e299f65d21cd1cbd96fc5d53228036df composite