Vue 3 Wrapper of smooth-dnd library.

Related tags

vue3-smooth-dnd
Overview

vue3-smooth-dnd

Vue 3 Wrapper of smooth-dnd library.
Live demo

NOTE: This is a Vue 3 wrapper over smooth-dnd library. It's a fork of the already done vue2 wrapper done by the original author of the library.

All the documentation for the Vue 2 version works with this package version too!

Install

yarn add vue3-smooth-dnd

Usage

{{i + 1}} -> {{item.data}}
">
<template>
  <div>
    <span>Studio Ghibli Tier List</span>
    <Container @drop="onDrop">            
      <Draggable v-for="(item, i) in items" :key="item.id">
        <div>
           {{i + 1}} -> {{item.data}}
        </div>
      </Draggable>
    </Container>
  </div>
</template>

<script>
import { Container, Draggable } from "vue3-smooth-dnd";
export default {
  name: "app",
  components: { Container, Draggable },
  data() {
    return {
      items: [
        { id: 1, data: "Princess Mononoke" },
        { id: 2, data: "Spirited Away" },
        { id: 3, data: "My Neighbor Totoro" },
        { id: 4, data: "Howl's Moving Castle" }
      ]
    };
  },
  methods: {  
    onDrop(dropResult){
      this.items = this.applyDrag(this.items, dropResult);
    },
    applyDrag(arr, dragResult){
      const { removedIndex, addedIndex, payload } = dragResult;

      if (removedIndex === null && addedIndex === null) return arr;
      const result = [...arr];
      let itemToAdd = payload;
      
      if (removedIndex !== null) {
        itemToAdd = result.splice(removedIndex, 1)[0];
      }
      if (addedIndex !== null) {
        result.splice(addedIndex, 0, itemToAdd);
      }
      return result;
    }
  }
}
</script>
Releases(0.0.2)
Owner
Gilbert Ndresaj
Hello friend, I build things for the web, i'm a Frontend developer based in Turin, Italy. @UnevenSoftware CoFounder
Gilbert Ndresaj
Vue component that simulates a user typing, selecting, and erasing text.

Vue component that simulates a user typing, selecting, and erasing text. Play with vue-typer in this interactive demo. Getting Started Usage Props tex

null 711 Jul 20, 2021
Credit card form with smooth and sweet micro-interactions

vue-interactive-paycard (npm package (for react & react-native too) is coming soon) A fantastic credit card form with smooth and sweet micro-interacti

Muhammed Erdem 5.3k Jul 26, 2021
A simple Vue.js component for fullscreen

vue-fullscreen A simple Vue.js component for fullscreen Live demo Quick Example Usage with v-for Usage with modal δΈ­ζ–‡ζ–‡ζ‘£ Browser support Full Screen API

mirari 355 Jul 20, 2021
Vue component, that helps to make sticky effects

vue-sticker Vue component, that helps to make sticky effects Installation # install component npm install --save-dev vue-sticker using like local comp

Kamil 192 Jul 19, 2021
πŸ– Vue component to highlight words within a larger body of text.

vue-highlight-words A simple port from react-highlight-words Vue component to highlight words within a larger body of text. demo Why? It uses render t

Yichang Liu 49 Jul 10, 2021
Hammer.js wrapper for Vue 2.x to support some touching operation in the mobile.

vue-hammer Hammer.js wrapper for Vue to support some operation in the mobile This is a directive wrapper for Hammer.js 2.x. And this repo'inspiration

Edan 230 Jul 8, 2021
Matteo Bruni 2.1k Jul 26, 2021
Vue promise wrapper component

vue-prom Vue promise wrapper component About The goal of this component is to simplify rendering logic based on promise state (pending / fulfilled, re

Byteboomers 149 Jun 18, 2021
πŸ’° Vue.js Google Adsense Component with InFeed and InArticle Ads support

?? Vue Google Adsense Vue.js Google Adsense Component with InFeed and InArticle Ads support ?? Demo https://mazipan.github.io/vue-google-adsense/ ❓ Wh

Irfan Maulana 194 Jul 6, 2021
A fully working, most feature-rich Vue.js terminal emulator

vue-command A fully working, most feature-rich Vue.js terminal emulator. See the demo and check the demo source code. Features Parses arguments with g

Julian Claus 158 Jun 29, 2021
A Vuetify ready Vue.js autosuggest component for the Google Places API.

Vuetify Google Autocomplete A Vuetify ready Vue.js (2.x) autosuggest component for the Google Maps Places API. Versions Latest Beta: 2.0.0-beta.8 Late

Madimetja Shika 93 Jan 28, 2021
↔️ ↕️ πŸ”„ Vue.js wrapper for Moveable

Vue Moveable A Vue Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable, Snappable. Moveable Drag

Max Lyashuk 874 Jul 26, 2021
Long click directive library for VueJS

vue-long-click Vue long click (longpress) directive Checkout the demo at https://ittus.github.io/vue-long-click/ Install npm install vue-long-click --

Thang Minh Vu 43 Mar 28, 2021
A fast Vue renderer for Notion pages

An unofficial Notion renderer Features Β· Install Β· Docs Β· Examples Β· Credits A Vue renderer for Notion pages. Use Notion as CMS for your blog, documen

Jannik 432 Jul 25, 2021