A set of vue mixins to turn any list into an animated, touch-friendly, sortable list ✌️

Overview

Vue Slicksort 🖖

Slicksort logo

A set of component mixins to turn any list into an animated, touch-friendly, sortable list. Based on react-sortable-hoc by [@clauderic]

npm version npm downloads license gzip size

Examples available here: https://jexordexan.github.io/vue-slicksort/

中文文档

Features

  • v-model Compatible – Make any array editable with the v-model standard
  • Mixin Components – Integrates with your existing components
  • Standalone Components – Easy to use components for slick lists
  • Drag handle, auto-scrolling, locked axis, events, and more!
  • Suuuper smooth animations – Chasing the 60FPS dream 🌈
  • Horizontal lists, vertical lists, or a grid
  • Touch support 👌
  • Oh yeah, and it's DEPENDENCY FREE! 👌

Installation

Using npm:

  $ npm install vue-slicksort --save

Using yarn:

  $ yarn add vue-slicksort

Using a CDN:

<script src="https://unpkg.com/[email protected]/dist/vue-slicksort.min.js"></script>

Then, using a module bundler that supports either CommonJS or ES2015 modules, such as webpack:

// Using an ES6 transpiler like Babel
import { ContainerMixin, ElementMixin } from 'vue-slicksort';

// Not using an ES6 transpiler
var slicksort = require('vue-slicksort');
var ContainerMixin = slicksort.ContainerMixin;
var ElementMixin = slicksort.ElementMixin;

If you are loading the package via <script> tag:

<script>
  var { ContainerMixin, ElementMixin, HandleDirective } = window.VueSlicksort;
</script>

Usage

Basic Example

import Vue from 'vue';
import { ContainerMixin, ElementMixin } from 'vue-slicksort';

const SortableList = {
  mixins: [ContainerMixin],
  template: `
    <ul class="list">
      <slot />
    </ul>
  `,
};

const SortableItem = {
  mixins: [ElementMixin],
  props: ['item'],
  template: `
    <li class="list-item">{{item}}</li>
  `,
};

const ExampleVue = {
  name: 'Example',
  template: `
    <div class="root">
      <SortableList lockAxis="y" v-model="items">
        <SortableItem v-for="(item, index) in items" :index="index" :key="index" :item="item"/>
      </SortableList>
    </div>
  `,
  components: {
    SortableItem,
    SortableList,
  },
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8'],
    };
  },
};

const app = new Vue({
  el: '#root',
  render: (h) => h(ExampleVue),
});

That's it! Vue Slicksort does not come with any styles by default, since it's meant to enhance your existing components.

Slicksort components

There are two pre-built components that implement the two mixins. Use them like this:

import { SlickList, SlickItem } from 'vue-slicksort';

const ExampleVue = {
  name: 'Example',
  template: `
    <div class="root">
      <SlickList lockAxis="y" v-model="items" tag="ul">
        <SlickItem v-for="(item, index) in items" :index="index" :key="index" tag="li">
          {{ item }}
        </SlickItem>
      </SlickList>
    </div>
  `,
  components: {
    SlickItem,
    SlickList,
  },
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8'],
    };
  },
};

Why should I use this?

There are already a number of great Drag & Drop libraries out there (for instance, vuedraggable is fantastic). If those libraries fit your needs, you should definitely give them a try first. However, most of those libraries rely on the HTML5 Drag & Drop API, which has some severe limitations. For instance, things rapidly become tricky if you need to support touch devices, if you need to lock dragging to an axis, or want to animate the nodes as they're being sorted. Vue Slicksort aims to provide a simple set of component mixins to fill those gaps. If you're looking for a dead-simple, mobile-friendly way to add sortable functionality to your lists, then you're in the right place.

Customization and props

You apply options as individual props on whatever component is using the ContainerMixin. The component also emits several events during a sorting operation. Here's an example of a customized component:

<SortableContainer
  :value="items"
  :transitionDuration="250"
  :lockAxis="'y'"
  :useDragHandle="true"
  @sort-start="onSortStart($event)"
>
  <!-- SortableElement stuff goes here -->
</SortableContainer>

ContainerMixin

Props

value (required)

type: Array

The value can be inherited from v-model but has to be set to the same list that is rendered with v-for inside the Container

axis

type: String

default: y

Items can be sorted horizontally, vertically or in a grid. Possible values: x, y or xy

lockAxis

type: String

If you'd like, you can lock movement to an axis while sorting. This is not something that is possible with HTML5 Drag & Drop

helperClass

type: String

You can provide a class you'd like to add to the sortable helper to add some styles to it

appendTo

type: String

default: body

You can provide a querySelector string you'd like to add to the sorting element to add parent dom

transitionDuration

type: Number

default: 300

The duration of the transition when elements shift positions. Set this to 0 if you'd like to disable transitions

draggedSettlingDuration

type: Number

default: null

Override the settling duration for the drag helper. If not set, transitionDuration will be used.

pressDelay

type: Number

default: 0

If you'd like elements to only become sortable after being pressed for a certain time, change this property. A good sensible default value for mobile is 200. Cannot be used in conjunction with the distance prop.

pressThreshold

type: Number

default: 5

Number of pixels of movement to tolerate before ignoring a press event.

distance

type: Number

default: 0

If you'd like elements to only become sortable after being dragged a certain number of pixels. Cannot be used in conjunction with the pressDelay prop.

useDragHandle

type: Boolean

default: false

If you're using the HandleDirective, set this to true

useWindowAsScrollContainer

type: Boolean

default: false

If you want, you can set the window as the scrolling container

hideSortableGhost

type: Boolean

default: true

Whether to auto-hide the ghost element. By default, as a convenience, Vue Slicksort List will automatically hide the element that is currently being sorted. Set this to false if you would like to apply your own styling.

lockToContainerEdges

type: Boolean

default: false

You can lock movement of the sortable element to it's parent Container

lockOffset

type: OffsetValue or [ OffsetValue, OffsetValue ]*

default: "50%"

When lockToContainerEdges is set to true, this controls the offset distance between the sortable helper and the top/bottom edges of it's parent Container. Percentage values are relative to the height of the item currently being sorted. If you wish to specify different behaviours for locking to the top of the container vs the bottom, you may also pass in an array (For example: ["0%", "100%"]).

* OffsetValue can either be a finite Number or a String made up of a number and a unit (px or %). Examples: 10 (which is the same as "10px"), "50%"

shouldCancelStart

type: Function

default: Function

This function is invoked before sorting begins, and can be used to programatically cancel sorting before it begins. By default, it will cancel sorting if the event target is either an input, textarea, select or option.

getHelperDimensions

type: Function

default: Function

Optional function({node, index, collection}) that should return the computed dimensions of the SortableHelper. See default implementation for more details

Events

Events are emitted from the Container element, and can be bound to using v-bind or @ directives

@sort-start

emits: { event: MouseEvent, node: HTMLElement, index: number, collection: string }

Fired when sorting begins.

@sort-move

emits: { event }

Fired when the mouse is moved during sorting.

@sort-end

emits: { event, newIndex, oldIndex, collection }

Fired when sorting has ended.

@input

emits: Array

Fired after sorting has ended with the newly sorted list.


ElementMixin

Props

index (required)

type: Number

This is the element's sortableIndex within it's collection. This prop is required.

collection

type: Number or String

default: 0

The collection the element is part of. This is useful if you have multiple groups of sortable elements within the same Container. Example

disabled

type: Boolean

default: false

Whether the element should be sortable or not

HandleDirective

The v-handle directive is used inside the draggable element.

The Container must have the :useDragHandle prop set to true for the handle to work as expected.

Here is an example for a simple element with a handle:

<template>
  <li class="list-item">
    <span v-handle class="handle"></span>
    {{item.value}}
  </li>
</template>

<script>
  import { ElementMixin, HandleDirective } from 'vue-slicksort';

  export default {
    mixins: [ElementMixin],
    directives: { handle: HandleDirective },
  };
</script>

FAQ

Upgrade from v0.x.x

The event names have all changed from camelCase to dash-case to accommodate for inline HTML templates.

Grid support?

Need to sort items in a grid? We've got you covered! Just set the axis prop to xy. Grid support is currently limited to a setup where all the cells in the grid have the same width and height, though we're working hard to get variable width support in the near future.

Item disappearing when sorting / CSS issues

Upon sorting, vue-slicksort creates a clone of the element you are sorting (the sortable-helper) and appends it to the end of the appendTo tag. The original element will still be in-place to preserve its position in the DOM until the end of the drag (with inline-styling to make it invisible). If the sortable-helper gets messed up from a CSS standpoint, consider that maybe your selectors to the draggable item are dependent on a parent element which isn't present anymore (again, since the sortable-helper is at the end of the appendTo prop). This can also be a z-index issue, for example, when using vue-slicksort within a Bootstrap modal, you'll need to increase the z-index of the SortableHelper so it is displayed on top of the modal.

Click events being swallowed

By default, vue-slicksort is triggered immediately on mousedown. If you'd like to prevent this behaviour, there are a number of strategies readily available. You can use the distance prop to set a minimum distance (in pixels) to be dragged before sorting is enabled. You can also use the pressDelay prop to add a delay before sorting is enabled. Alternatively, you can also use the HandleDirective.

Scoped styles

If you are using scoped styles on the sortable list, you can use appendTo prop.

Dependencies

Slicksort has no dependencies. vue is the only peerDependency

Reporting Issues

If believe you've found an issue, please report it along with any relevant details to reproduce it. The easiest way to do so is to fork this jsfiddle.

Asking for help

Please file an issue for personal support requests. Tag them with question.

Contributions

Yes please! Feature requests / pull requests are welcome.

Thanks

This library is heavily based on react-sortable-hoc by Claudéric Demers (@clauderic). A very simple and low overhead implementation of drag and drop that looks and performs great!

Comments
  • Standalone Slicksort component

    Standalone Slicksort component

    This could behave similarly to the <draggable> component in vuedraggable Where there is one component with a slot for it's children, which have been iterated using v-for.

    enhancement help wanted 0.2.x 
    opened by Jexordexan 11
  • Can't seem to use other components as items

    Can't seem to use other components as items

    I want to create a sortable list of component elements. I can get them to render fine, but after I drag, the elements repopulate with their original sorted value. It appears the v-model binding is not being updated down or something.

    opened by mattbishop 10
  • Define sortable container explicitly

    Define sortable container explicitly

    Hi, I have a problem while sorting. Dragged element disappears from view. It is inserted just before closing body tag. Is there a way to define sortable container?

    question 
    opened by ghost 10
  • Source data does not seem to be updated when @sort-end fires

    Source data does not seem to be updated when @sort-end fires

    Hey Jordan,

    A bit confused by this one...

    I'm using v-model as suggested in the docs to update the sortable parent. I'm also using @sort-end to report updates so I can save the source data.

    However, the data appears to always be one drag behind!

        onSortEnd ({ newIndex, oldIndex }) {
          console.log(this.items.map(item => item.title)) // always one drag behind!
          // can't save items :(
        },
    

    Whilst investigating the v-model setup, I replaced it with a simple :value="items" prop and instead did my own ordering in the sort end handler:

        onSortEnd ({ newIndex, oldIndex }) {
          this.items.splice(newIndex, 0, ...this.items.splice(oldIndex, 1))
          console.log(this.items.map(item => item.title)) // looking good
          // save items :)
        },
    

    The manual method works for me, but any idea what is going on?

    Is this expected behaviour?

    opened by davestewart 6
  • Add `tag` props to SlickList and SlickItem

    Add `tag` props to SlickList and SlickItem

    Great little lib!

    I needed to add DnD to a bulleted list without getting into the weeds. Your built-in components seemed like just the ticket, but they add invalid markup if you just need a list.

    This PR allows the user to change the tag type, in the same way that Vue Router's <router-link> does:

              <SlickList
                v-model="articles"
                lock-axis="y"
                tag="ul"
              >
                <SlickItem
                  v-for="(article, index) in articles"
                  :key="article.acc"
                  :index="index"
                  tag="li"
                >
                  {{ article.title }}
                </SlickItem>
              </SlickList>
            </div>
    
    <ul>
        <li>
            Luxury Brands Follow Chinese Shoppers Back Home; For the first time, designer brands opened more shops in
            markets like China and Japan than in Europe
        </li>
        <li>
            Puig Shakes Up Business Structure, Aims for 3 Billion Euros in 2023 Sales
        </li>
        <li>
            James Harden's Stepback From the Rockets; The NBA star wants out with two years left on his contract. It's the
            latest saga pitting a disgruntled player against his own team.
        </li>
    </ul>
    

    Cheers 👍

    opened by davestewart 6
  • Dragging between lists

    Dragging between lists

    This is a fantastic project and the ability to drag in a grid is a feature I've not found anywhere else. However, I was wondering if there was a way you could drag and drop between two lists?

    I have two arrays and I want to be able to move items between them; is this possible?

    Thanks!

    opened by hako-studio 6
  • Cannot read property 'x' of undefined

    Cannot read property 'x' of undefined

    I'm randomly getting this error after updating to version 1.1.1.

    VM121882 vue-slicksort.umd.js:713
    Uncaught TypeError: Cannot read property 'x' of undefined
        at VueComponent.transitionHelperIntoPlace (VM121882 vue-slicksort.umd.js:713)
        at VueComponent.boundFn [as transitionHelperIntoPlace] (VM121357 vue.esm.js:191)
        at VueComponent.handleSortEnd (VM121882 vue-slicksort.umd.js:691)
        at boundFn (VM121357 vue.esm.js:191)
    

    It's failing here in the transitionHelperIntoPlace function.

          var targetX = -deltaScroll.left;
     >>>> if (this.translate.x > 0) {
            // Diff against right edge when moving to the right
            targetX += newIndexNode.offsetLeft + newIndexNode.offsetWidth - (indexNode.offsetLeft + indexNode.offsetWidth);
          } else {
            targetX += newIndexNode.offsetLeft - indexNode.offsetLeft;
          }
    
    bug help wanted 
    opened by ericmcpheron 6
  • [HELP] Unhandled error during execution of render function

    [HELP] Unhandled error during execution of render function

    Hello guys,

    I'm using the project in my application and I'm getting this error

    [Vue warn]: Unhandled error during execution of render function 
      at <SlickList axis="y" value= []length: 0[[Prototype]]: Array(0) tag=
    

    My implementation looks like this

    <slick-list axis="y" value="prizes" tag="ul"
                class="flex flex-col divide divide-y  w-full"
                @input="sortUpdated">
    

    This implementation of mine is old and I updated the package today. I'm using vue 3

    If anyone can help me I would be very grateful

    Hugs

    opened by jeffagostinho 5
  • Transition the dragged item into place when sorting ends

    Transition the dragged item into place when sorting ends

    The dragged item transition time is specified in the draggedSettlingDuration prop. As part of this feature the offset from the final position to the drop position is calculated and provided in the sortEnd event in case it's useful to the client (the translate parameter). The logic to calculate the offset uses the bounding box of the dragged item, so I'm not sure what would happen if its size were to change when dragging. If there is any trouble one could always disable the feature by setting draggedSettlingDuration to 0.

    Edit: The solution is very different now. See comment below.

    opened by andens 5
  • [help] v-handle inside component

    [help] v-handle inside component

    How can i use v-handle inside mixin component?

    Forex: I pass custom component in mixin.

    let SortableItem = { 
    mixins: [ElementMixin], 
    props: ["item"], 
    directives: { handle: HandleDirective }, 
    template: '<question-shell v-bind:question="'What is your name?'" question-type="paragraph" v-bind:question-no="1"></question-shell>', }
    

    This is inside component.

    <div class="handle" v-handle>
        <div class="icon-alpha size-32"></div>
    </div>
    

    How can i use v-hande directive inside another component?

    opened by ghost 5
  • Feature Request: Add CSS class to container when item actively being dragged

    Feature Request: Add CSS class to container when item actively being dragged

    Having a simple way to add a CSS class to the container when an item is being dragged would be helpful. In my specific use case, I want to disable text selection when dragging is happening (w/CSS's user-select: none), but keep it enabled when no dragging is happening.

    If this is already feasible with the current API, please let me know and I'll close this. Thanks ahead of time.

    text selection on drag

    opened by lokesh 4
  • Unable to drop the element when dragging

    Unable to drop the element when dragging

    We are unable to drop the element when using Vue3 and Vue Slicksort 1.2.0 JS and receive an error in the console.

    vue-slicksort-1.2.0.min.js:1 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'slice')

    image

    Below is the example fiddler of the mentioned issue. https://jsfiddle.net/euLarkdg/50/

    opened by jebaexpert 0
  • build(deps): bump express from 4.17.1 to 4.18.2

    build(deps): bump express from 4.17.1 to 4.18.2

    Bumps express from 4.17.1 to 4.18.2.

    Release notes

    Sourced from express's releases.

    4.18.2

    4.18.1

    • Fix hanging on large stack of sync routes

    4.18.0

    ... (truncated)

    Changelog

    Sourced from express's changelog.

    4.18.2 / 2022-10-08

    4.18.1 / 2022-04-29

    • Fix hanging on large stack of sync routes

    4.18.0 / 2022-04-25

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • build(deps): bump qs from 6.5.2 to 6.5.3

    build(deps): bump qs from 6.5.2 to 6.5.3

    Bumps qs from 6.5.2 to 6.5.3.

    Changelog

    Sourced from qs's changelog.

    6.5.3

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] utils.merge: avoid a crash with a null target and a truthy non-array source
    • [Fix] correctly parse nested arrays
    • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
    • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
    • [Fix] when parseArrays is false, properly handle keys ending in []
    • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
    • [Fix] utils.merge: avoid a crash with a null target and an array source
    • [Refactor] utils: reduce observable [[Get]]s
    • [Refactor] use cached Array.isArray
    • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
    • [Refactor] parse: only need to reassign the var once
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [readme] remove travis badge; add github actions/codecov badges; update URLs
    • [Docs] Clean up license text so it’s properly detected as BSD-3-Clause
    • [Docs] Clarify the need for "arrayLimit" option
    • [meta] fix README.md (#399)
    • [meta] add FUNDING.yml
    • [actions] backport actions from main
    • [Tests] always use String(x) over x.toString()
    • [Tests] remove nonexistent tape option
    • [Dev Deps] backport from main
    Commits
    • 298bfa5 v6.5.3
    • ed0f5dc [Fix] parse: ignore __proto__ keys (#428)
    • 691e739 [Robustness] stringify: avoid relying on a global undefined (#427)
    • 1072d57 [readme] remove travis badge; add github actions/codecov badges; update URLs
    • 12ac1c4 [meta] fix README.md (#399)
    • 0338716 [actions] backport actions from main
    • 5639c20 Clean up license text so it’s properly detected as BSD-3-Clause
    • 51b8a0b add FUNDING.yml
    • 45f6759 [Fix] fix for an impossible situation: when the formatter is called with a no...
    • f814a7f [Dev Deps] backport from main
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • build(deps): bump decode-uri-component from 0.2.0 to 0.2.2

    build(deps): bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • build(deps-dev): bump postcss from 8.2.6 to 8.2.13

    build(deps-dev): bump postcss from 8.2.6 to 8.2.13

    Bumps postcss from 8.2.6 to 8.2.13.

    Release notes

    Sourced from postcss's releases.

    8.2.13

    • Fixed ReDoS vulnerabilities in source map parsing (by @​yetingli).

    8.2.12

    • Fixed package.json exports.

    8.2.11

    • Fixed DEP0148 warning in Node.js 16.
    • Fixed docs (by @​semiromid).

    8.2.10

    8.2.9

    8.2.8

    8.2.7

    Changelog

    Sourced from postcss's changelog.

    8.2.13

    • Fixed ReDoS vulnerabilities in source map parsing (by Yeting Li).

    8.2.12

    • Fixed package.json exports.

    8.2.11

    • Fixed DEP0148 warning in Node.js 16.
    • Fixed docs (by @​semiromid).

    8.2.10

    • Fixed ReDoS vulnerabilities in source map parsing.
    • Fixed webpack 5 support (by Barak Igal).
    • Fixed docs (by Roeland Moors).

    8.2.9

    • Exported NodeErrorOptions type (by Rouven Weßling).

    8.2.8

    • Fixed browser builds in webpack 4 (by Matt Jones).

    8.2.7

    • Fixed browser builds in webpack 5 (by Matt Jones).
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • build(deps): bump follow-redirects from 1.13.2 to 1.15.2

    build(deps): bump follow-redirects from 1.13.2 to 1.15.2

    Bumps follow-redirects from 1.13.2 to 1.15.2.

    Commits
    • 9655237 Release version 1.15.2 of the npm package.
    • 6e2b86d Default to localhost if no host given.
    • 449e895 Throw invalid URL error on relative URLs.
    • e30137c Use type functions.
    • 76ea31f ternary operator syntax fix
    • 84c00b0 HTTP header lines are separated by CRLF.
    • d28bcbf Create SECURITY.md (#202)
    • 62a551c Release version 1.15.1 of the npm package.
    • 7fe0779 Use for ... of.
    • 948c30c Fix redirecting to relative URL when using proxy
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Owner
A Jordan Simonds
I build apps and help make them look pretty. Doesn't hurt to make them fast either!
A Jordan Simonds
A sortable list directive with Vue

Awe-dnd Makes your elements draggable in Vue. See Demo: http://hilongjw.github.io/vue-dragging/ Some of goals of this project worth noting include: su

Awe 759 Nov 29, 2022
A sortable list directive with Vue

Awe-dnd Makes your elements draggable in Vue. See Demo: http://hilongjw.github.io/vue-dragging/ Some of goals of this project worth noting include: su

Awe 759 Nov 29, 2022
A touch slider for vue.js, support sliding in any direction to switch cards, compatible with PC and mobile.

vue-card-swipe A touch slider for vue.js, support sliding in any direction to switch cards, compatible with PC and mobile. Online Demo Install $ npm i

Sky.Sun 孙正华 27 Dec 10, 2022
Vue drag-and-drop component based on Sortable.js

Vue.Draggable Vue component (Vue.js 2.0) or directive (Vue.js 1.0) allowing drag-and-drop and synchronization with view model array. Based on and offe

SortableJS 18.3k Jan 7, 2023
A draggable sortable vue tree component, with dragging placeholder, types definition.

he-tree-vue A draggable sortable vue tree component, with dragging placeholder, types definition. Vue3 supported. Demo, Document 可拖拽可排序vue树组件, 支持拖拽占位盒

Xinxin 127 Nov 1, 2022
A fast and lightweight drag&drop, sortable library for Vue.js

A fast and lightweight drag&drop, sortable library for Vue.js with many configuration options covering many d&d scenarios.

amendx 142 Dec 23, 2022
Vue 3 drag-and-drop component based on Sortable.js

Vue 3 drag-and-drop component based on Sortable.js

Anish George 337 Dec 29, 2022
Vue drag-and-drop component based on Sortable.js

Vue.Draggable Vue component (Vue.js 2.0) or directive (Vue.js 1.0) allowing drag-and-drop and synchronization with view model array. Based on and offe

SortableJS 18.3k Dec 30, 2022
Vue drag-and-drop component based on Sortable.js

How to publish this package npm publish --access pubic Vue.Draggable Vue component (Vue.js 2.0) or directive (Vue.js 1.0) allowing drag-and-drop and s

Course Square 0 May 28, 2022
A thin wrapper around Sortable.js for Vue 3

SortableJS-vue3 Demo | npm This is a thin wrapper around the great SortableJS library. I had many issues migrating from Vue.Draggable to vue.draggable

Max Leiter 174 Jan 8, 2023
Vue component who put SortableJS/Vue.Draggable and tangbc/vue-virtual-scroll-list together and allow drag-and-drop and big amount data list with high scroll performance.

Vue component who put SortableJS/Vue.Draggable and tangbc/vue-virtual-scroll-list together and allow drag-and-drop and big amount data list with high scroll performance.

Tajima Jumpei 34 Nov 20, 2022
Vue Drag and Drop library without any dependency 👌

Description Vue Drag and Drop library without any dependency. Native HTML5 drag and drop implementation made for Vue. Examples ?? Installation npm ins

Vivify Ideas 303 Nov 23, 2022
Drag, sort and drop any element in vuejs with vue-draggable

Drag, sort and drop any element in vuejs with vue-draggable

null 0 Oct 25, 2022
Vue component which acts as a draggable, resizable and rotateable container for any content

Vue component which acts as a draggable, resizable and rotateable container for any content

Andrey Minogin 74 Oct 20, 2022
A simple drag & drop hierarchical list made as a vue component.

vue-nestable Drag & drop hierarchical list made as a vue component. Goals A simple vue component to create a draggable list to customizable items Reor

Ralph Huwiler 311 Dec 20, 2022
A simple kanban board where the items can be dragged and dropped from the list. This is a hybrid implementation of vue-smooth-dnd.

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 Installa

Sujil Maharjan 173 Nov 22, 2022
Clean drag and drop list component built with Vue.js

drag-and-drop Description Clean drag and drop list component built with Vue.js. Basic component allows for item sortability of a parent array. Additio

null 3 Mar 22, 2022
List-based drag&drop component for vue 3.x,

vue3-draggable list-based drag&drop component for vue 3.x, with no dependencies Features support v-model support transition customizable draggable com

김성환 23 Dec 11, 2022
Revue Draggable - Make your Vue components draggable, Supports Vue 2 and Vue 3

Revue Draggable - Make your Vue components draggable, Supports Vue 2 and Vue 3

Braks 113 Dec 26, 2022