npmpackage.info

Gathering detailed insights and metrics for vue-shopify-draggable

Other packages similar to vue-shopify-draggable

@hipsjs/shopify-draggable-vue

1.0.7

Shopify draggable for Vue

draggable-vue

1.0.0

Use the @shopify/draggable library your grandparents warned you about with Vue.js

@hipsjs/flowy-vue

1.0.13

Shopify draggable for Vue

@chibel/flowy-vue

1.0.4

Shopify draggable for Vue

Gathering detailed insights and metrics for vue-shopify-draggable

vue-shopify-draggable

Vue component of Shopify draggable.

0.0.3

MIT

JavaScript

86.47 kB

2.8

Installations

npm install vue-shopify-draggable

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

12.22.7

NPM Version

6.14.15 Pull Requests

Open

0

Total

1

Closed

0

Merged

1

Issues

Open

1

Total

4

Closed

3

Releases

v0.0.3

Updated on Nov 06, 2021

v0.0.2

Updated on Jan 09, 2021

v0.0.1

Updated on Oct 17, 2020

View All 3 releases

Languages

JavaScript

JavaScript (100%)

Developer

zjffun

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

16 Stars

25 Commits

7 Forks

1 Watchers

4 Branches

2 Contributors

Updated on May 24, 2024

Maintainers

View All 2 Contributors

Package Meta Information

Latest Version

0.0.3

Package Id

vue-shopify-draggable@0.0.3

Unpacked Size

86.47 kB

Size

11.90 kB

File Count

NPM Version

6.14.15

Node Version

12.22.7

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

vue-shopify-draggable

English | 简体中文

Vue component of Shopify draggable.

Installation

npm:

1npm install vue-shopify-draggable
2# peer dependencies
3npm install vue @shopify/draggable

CDN:

1<script src="//cdn.jsdelivr.net/npm/vue-shopify-draggable/lib/index.js"></script>

Usage

ES6:

1import Vue from 'vue';
2import VueShopifyDraggable from 'vue-shopify-draggable';
3Vue.use(VueShopifyDraggable);

CDN:

1<script src="//cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.11/lib/draggable.bundle.js"></script>
2<script src="//cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
3<script src="//cdn.jsdelivr.net/npm/vue-shopify-draggable/lib/index.js"></script>
4<script>
5  Vue.use(VueShopifyDraggable);
6</script>

Vue3:

1<div id="vue-shopify-draggable-app">
2  <vue-sortable :options="options" @sortable:sorted="sorted">
3    <vue-draggable-container tag="ul">
4      <li class="item">sortable-item1</li>
5      <li class="item">sortable-item2</li>
6    </vue-draggable-container>
7    <hr />
8    <vue-draggable-container tag="ul">
9      <li class="item">sortable-item3</li>
10    </vue-draggable-container>
11  </vue-sortable>
12</div>
13
14<script src="//cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.11/lib/draggable.bundle.js"></script>
15<script src="//cdn.jsdelivr.net/npm/vue@3.2.21/dist/vue.global.min.js"></script>
16<script src="//cdn.jsdelivr.net/npm/vue-shopify-draggable/lib/index.js"></script>
17
18<script>
19  const VueShopifyDraggableApp = {
20    methods: {
21      sorted: function (e) {
22        console.log(e);
23      },
24    },
25    data() {
26      return {
27        options: {
28          draggable: '.item',
29          sortAnimation: {
30            duration: 200,
31            easingFunction: 'ease-in-out',
32          },
33          plugins: [Draggable.Plugins.SortAnimation],
34        },
35      };
36    },
37  };
38
39  const app = Vue.createApp(VueShopifyDraggableApp);
40
41  app.use(VueShopifyDraggable);
42
43  app.mount('#vue-shopify-draggable-app');
44</script>

Register components

1Vue.use(VueShopifyDraggable);

Separately register components:

1Vue.use(VueShopifyDraggable.DraggableContainer);
2Vue.use(VueShopifyDraggable.Sortable);
3Vue.use(VueShopifyDraggable.Swappable);
4Vue.use(VueShopifyDraggable.Droppable);
5Vue.use(VueShopifyDraggable.Draggable);
6
7// or
8
9Vue.component('CustomName', VueShopifyDraggable.Swappable);

`vue-sortable`

vue-sortable support set options and listen events of Sortable.

Example

1<div id="VueEl"></div>
2
3<script type="text/template" id="VueTemplate">
4  <vue-sortable :options="options" @sortable:sorted="sorted">
5    <vue-draggable-container tag="ul">
6      <li class="item">sortable-item1</li>
7      <li class="item">sortable-item2</li>
8    </vue-draggable-container>
9    <hr />
10    <vue-draggable-container tag="ul">
11      <li class="item">sortable-item3</li>
12    </vue-draggable-container>
13  </vue-sortable>
14</script>
15
16<script src="//cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.11/lib/draggable.bundle.js"></script>
17<script src="//cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
18<script src="//cdn.jsdelivr.net/npm/vue-shopify-draggable/lib/index.js"></script>
19
20<script>
21  Vue.use(VueShopifyDraggable);
22  new Vue({
23    el: VueEl,
24    template: VueTemplate.innerHTML,
25    data: function () {
26      return {
27        options: {
28          draggable: '.item',
29          sortAnimation: {
30            duration: 200,
31            easingFunction: 'ease-in-out',
32          },
33          plugins: [Draggable.Plugins.SortAnimation],
34        },
35      };
36    },
37    methods: {
38      sorted: function (e) {
39        console.log(e);
40      },
41    },
42  });
43</script>

`vue-swappable`

vue-swappable support set options and listen events of Swappable.

Example

1<div id="VueEl"></div>
2
3<script type="text/template" id="VueTemplate">
4  <vue-swappable :options="options" @swappable:swapped="swapped">
5    <vue-draggable-container tag="ul">
6      <li class="item">draggable-item1</li>
7      <li class="item">draggable-item2</li>
8    </vue-draggable-container>
9    <hr />
10    <vue-draggable-container tag="ul">
11      <li class="item">draggable-item3</li>
12    </vue-draggable-container>
13  </vue-swappable>
14</script>
15
16<script src="//cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.11/lib/draggable.bundle.js"></script>
17<script src="//cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
18<script src="//cdn.jsdelivr.net/npm/vue-shopify-draggable/lib/index.js"></script>
19
20<script>
21  Vue.use(VueShopifyDraggable);
22  new Vue({
23    el: VueEl,
24    template: VueTemplate.innerHTML,
25    data: function () {
26      return {
27        options: {
28          draggable: '.item',
29        },
30      };
31    },
32    methods: {
33      swapped: function (e) {
34        console.log(e);
35      },
36    },
37  });
38</script>

`vue-droppable`

vue-droppable support set options and listen events of Droppable.

Example

1<style>
2  .dropzone {
3    height: 30px;
4    border: 2px solid aqua;
5  }
6</style>
7
8<div id="VueEl"></div>
9
10<script type="text/template" id="VueTemplate">
11  <vue-droppable :options="options" @droppable:start="start" @droppable:dropped="dropped">
12    <vue-draggable-container>
13      <div class="dropzone draggable-dropzone--occupied"><div class="item">droppable-item1</div></div>
14      <div class="dropzone draggable-dropzone--occupied"><div class="item">droppable-item2</div></div>
15      <div class="dropzone draggable-dropzone--occupied"><div class="item">droppable-item3</div></div>
16    </vue-draggable-container>
17    <hr />
18    <vue-draggable-container>
19      <div class="dropzone"></div>
20    </vue-draggable-container>
21  </vue-droppable>
22</script>
23
24<script src="//cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.11/lib/draggable.bundle.js"></script>
25<script src="//cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
26<script src="//cdn.jsdelivr.net/npm/vue-shopify-draggable/lib/index.js"></script>
27
28<script>
29  Vue.use(VueShopifyDraggable);
30  new Vue({
31    el: VueEl,
32    template: VueTemplate.innerHTML,
33    data: function () {
34      return {
35        options: {
36          draggable: '.item',
37          dropzone: '.dropzone',
38        },
39      };
40    },
41    methods: {
42      dropped: function (e) {
43        console.log(e);
44      },
45      start: function (e) {
46        console.log(e);
47      },
48    },
49  });
50</script>

`vue-draggable`

vue-draggable support set options and listen events of Draggable.

Example

1<div id="VueEl"></div>
2
3<script type="text/template" id="VueTemplate">
4  <vue-draggable :options="options" @drag:start="dragStart">
5    <vue-draggable-container tag="ul">
6      <li class="item">draggable-item1</li>
7      <li class="item">draggable-item2</li>
8    </vue-draggable-container>
9    <hr />
10    <vue-draggable-container tag="ul">
11      <li class="item">draggable-item3</li>
12    </vue-draggable-container>
13  </vue-draggable>
14</script>
15
16<script src="//cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.11/lib/draggable.bundle.js"></script>
17<script src="//cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
18<script src="//cdn.jsdelivr.net/npm/vue-shopify-draggable/lib/index.js"></script>
19
20<script>
21  Vue.use(VueShopifyDraggable);
22  new Vue({
23    el: VueEl,
24    template: VueTemplate.innerHTML,
25    data: function () {
26      return {
27        options: {
28          draggable: '.item',
29        },
30      };
31    },
32    methods: {
33      dragStart: function (e) {
34        console.log(e);
35      },
36    },
37  });
38</script>

`vue-draggable-container`

vue-draggable-container is always use as children of vue-sortable, vue-swappable, vue-droppable and vue-draggable.

API

Props

options

options property can set to vue-sortable, vue-swappable, vue-droppable and vue-draggable.

Example

1<vue-sortable :options="options"></vue-sortable>
2<vue-swappable :options="options"></vue-swappable>
3<vue-droppable :options="options"></vue-droppable>
4<vue-draggable :options="options"></vue-draggable>

tag

tag property can set to vue-draggable-container, vue-sortable, vue-swappable, vue-droppable and vue-draggable.

If you not want to generate a wrapper dom, you can set an empty string for the tag. Notice: If you set an empty string for the tag of a component, this component will only render the first slot node.

Example

1<vue-draggable-container tag="div"></vue-draggable-container>
2<vue-sortable tag="ul"></vue-sortable>
3<vue-swappable tag="div"></vue-swappable>
4<vue-droppable tag="section"></vue-droppable>
5<vue-draggable tag="main"></vue-draggable>

Empty string:

1<vue-draggable-container tag="">
2  <div>rendered</div>
3  <div>not rendered</div>
4</vue-draggable-container>

pluginEvents

Shopify draggable is easy to create plugins, those plugins may emit custom events. You can listen those events by set pluginEvents.

vue-shopify-draggable is already listened all official plugins' events, so only events of third plugins need push in pluginEvents.

Example

1<vue-draggable pluginEvents="['eventName']"></vue-draggable>

Events

Draggable:

draggable:initialize
draggable:destroy
drag:start
drag:move
drag:over
drag:over:container
drag:out
drag:out:container
drag:stop
drag:stopped (added in @shopify/draggable@1.0.0-beta.12)
drag:pressure

Sortable:

sortable:start
sortable:sort
sortable:sorted
sortable:stop

Swappable:

swappable:start
swappable:swap
swappable:swapped
swappable:stop'

Droppable:

droppable:start
droppable:dropped
droppable:returned
droppable:stop

Plugins:

mirror:create
mirror:created
mirror:attached
mirror:move
mirror:destroy
collidable:in
collidable:out
snap:in
snap:out

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.8

/10

Last Scanned on 2025-06-30

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

vue-shopify-draggable - 0.0.3 | npmpackage.info

Other packages similar to vue-shopify-draggable

Other packages similar to vue-shopify-draggable

vue-shopify-draggable

Installations

Developer Guide

No

CommonJS

12.22.7

6.14.15

Pull Requests

0

1

0

1

Issues

1

4

3

Releases

Languages

Developer

zjffun

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

vue-shopify-draggable

TOC

Installation

Usage

Register components

vue-sortable

vue-swappable

vue-droppable

vue-draggable

vue-draggable-container

API

Props

options

tag

pluginEvents

Events

10

10

10

0

0

0

0

0

0

0

0

0

2.8

/10

`vue-sortable`

`vue-swappable`

`vue-droppable`

`vue-draggable`

`vue-draggable-container`