Switch branches/tags
Nothing to show
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
..
Failed to load latest commit information.
Dragdrop.js
README.md

README.md

↕️ Dragdrop directive

Directive that uses Dragula to reorder your lists using drag&drop. A drag&drop will:

  • Reorders the DOM elements (by Dragula)
  • Reorders the VueJS array that renders those elements
  • Assign the order property of all items of that array to match the new order

Demo screenshot

Demo

Installation

Install dependencies

npm install dragula -D
npm install lodash -D

Copy/paste the code in a new Dragdrop.js file.

Add it to any component that needs it.

import Dragdrop from './path/to/Dragdrop.js'

export default {
    directives: { Dragdrop },
}

Usage

<div v-dragdrop="chapters" order="order" :options="options">
    <div 
        v-for="chapter in chapters" :key="chapter.id"
        v-text="chapter.title"
    ></div>
</div>

Options

Attribute Default Description
v-dragdrop="array" required Tells the directive to initialize Dragula on this container and to update our array accordingly.
order No order update Tells the directive which property of our items keeps track of its order. You can use dot notation to provide a nested property. E.g. order="order" will update chapter.order whilst order="meta.order" will update chapter.meta.order.
options {} Provides Dragula options.