vue-shopify-draggable

0.0.3 • Public • Published

jsdelivr npm version test CI

vue-shopify-draggable

English | 简体中文

Vue component of Shopify draggable.

TOC

Installation

npm:

npm install vue-shopify-draggable
# peer dependencies
npm install vue @shopify/draggable

CDN:

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

Usage

ES6:

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

CDN:

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

Vue3:

<div id="vue-shopify-draggable-app">
  <vue-sortable :options="options" @sortable:sorted="sorted">
    <vue-draggable-container tag="ul">
      <li class="item">sortable-item1</li>
      <li class="item">sortable-item2</li>
    </vue-draggable-container>
    <hr />
    <vue-draggable-container tag="ul">
      <li class="item">sortable-item3</li>
    </vue-draggable-container>
  </vue-sortable>
</div>

<script src="//cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.11/lib/draggable.bundle.js"></script>
<script src="//cdn.jsdelivr.net/npm/vue@3.2.21/dist/vue.global.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/vue-shopify-draggable/lib/index.js"></script>

<script>
  const VueShopifyDraggableApp = {
    methods: {
      sorted: function (e) {
        console.log(e);
      },
    },
    data() {
      return {
        options: {
          draggable: '.item',
          sortAnimation: {
            duration: 200,
            easingFunction: 'ease-in-out',
          },
          plugins: [Draggable.Plugins.SortAnimation],
        },
      };
    },
  };

  const app = Vue.createApp(VueShopifyDraggableApp);

  app.use(VueShopifyDraggable);

  app.mount('#vue-shopify-draggable-app');
</script>

Register components

Register all components:

Vue.use(VueShopifyDraggable);

Separately register components:

Vue.use(VueShopifyDraggable.DraggableContainer);
Vue.use(VueShopifyDraggable.Sortable);
Vue.use(VueShopifyDraggable.Swappable);
Vue.use(VueShopifyDraggable.Droppable);
Vue.use(VueShopifyDraggable.Draggable);

// or

Vue.component('CustomName', VueShopifyDraggable.Swappable);

vue-sortable

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

Example
<div id="VueEl"></div>

<script type="text/template" id="VueTemplate">
  <vue-sortable :options="options" @sortable:sorted="sorted">
    <vue-draggable-container tag="ul">
      <li class="item">sortable-item1</li>
      <li class="item">sortable-item2</li>
    </vue-draggable-container>
    <hr />
    <vue-draggable-container tag="ul">
      <li class="item">sortable-item3</li>
    </vue-draggable-container>
  </vue-sortable>
</script>

<script src="//cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.11/lib/draggable.bundle.js"></script>
<script src="//cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/vue-shopify-draggable/lib/index.js"></script>

<script>
  Vue.use(VueShopifyDraggable);
  new Vue({
    el: VueEl,
    template: VueTemplate.innerHTML,
    data: function () {
      return {
        options: {
          draggable: '.item',
          sortAnimation: {
            duration: 200,
            easingFunction: 'ease-in-out',
          },
          plugins: [Draggable.Plugins.SortAnimation],
        },
      };
    },
    methods: {
      sorted: function (e) {
        console.log(e);
      },
    },
  });
</script>

vue-swappable

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

Example
<div id="VueEl"></div>

<script type="text/template" id="VueTemplate">
  <vue-swappable :options="options" @swappable:swapped="swapped">
    <vue-draggable-container tag="ul">
      <li class="item">draggable-item1</li>
      <li class="item">draggable-item2</li>
    </vue-draggable-container>
    <hr />
    <vue-draggable-container tag="ul">
      <li class="item">draggable-item3</li>
    </vue-draggable-container>
  </vue-swappable>
</script>

<script src="//cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.11/lib/draggable.bundle.js"></script>
<script src="//cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/vue-shopify-draggable/lib/index.js"></script>

<script>
  Vue.use(VueShopifyDraggable);
  new Vue({
    el: VueEl,
    template: VueTemplate.innerHTML,
    data: function () {
      return {
        options: {
          draggable: '.item',
        },
      };
    },
    methods: {
      swapped: function (e) {
        console.log(e);
      },
    },
  });
</script>

vue-droppable

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

Example
<style>
  .dropzone {
    height: 30px;
    border: 2px solid aqua;
  }
</style>

<div id="VueEl"></div>

<script type="text/template" id="VueTemplate">
  <vue-droppable :options="options" @droppable:start="start" @droppable:dropped="dropped">
    <vue-draggable-container>
      <div class="dropzone draggable-dropzone--occupied"><div class="item">droppable-item1</div></div>
      <div class="dropzone draggable-dropzone--occupied"><div class="item">droppable-item2</div></div>
      <div class="dropzone draggable-dropzone--occupied"><div class="item">droppable-item3</div></div>
    </vue-draggable-container>
    <hr />
    <vue-draggable-container>
      <div class="dropzone"></div>
    </vue-draggable-container>
  </vue-droppable>
</script>

<script src="//cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.11/lib/draggable.bundle.js"></script>
<script src="//cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/vue-shopify-draggable/lib/index.js"></script>

<script>
  Vue.use(VueShopifyDraggable);
  new Vue({
    el: VueEl,
    template: VueTemplate.innerHTML,
    data: function () {
      return {
        options: {
          draggable: '.item',
          dropzone: '.dropzone',
        },
      };
    },
    methods: {
      dropped: function (e) {
        console.log(e);
      },
      start: function (e) {
        console.log(e);
      },
    },
  });
</script>

vue-draggable

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

Example
<div id="VueEl"></div>

<script type="text/template" id="VueTemplate">
  <vue-draggable :options="options" @drag:start="dragStart">
    <vue-draggable-container tag="ul">
      <li class="item">draggable-item1</li>
      <li class="item">draggable-item2</li>
    </vue-draggable-container>
    <hr />
    <vue-draggable-container tag="ul">
      <li class="item">draggable-item3</li>
    </vue-draggable-container>
  </vue-draggable>
</script>

<script src="//cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.11/lib/draggable.bundle.js"></script>
<script src="//cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/vue-shopify-draggable/lib/index.js"></script>

<script>
  Vue.use(VueShopifyDraggable);
  new Vue({
    el: VueEl,
    template: VueTemplate.innerHTML,
    data: function () {
      return {
        options: {
          draggable: '.item',
        },
      };
    },
    methods: {
      dragStart: function (e) {
        console.log(e);
      },
    },
  });
</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
<vue-sortable :options="options"></vue-sortable>
<vue-swappable :options="options"></vue-swappable>
<vue-droppable :options="options"></vue-droppable>
<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
<vue-draggable-container tag="div"></vue-draggable-container>
<vue-sortable tag="ul"></vue-sortable>
<vue-swappable tag="div"></vue-swappable>
<vue-droppable tag="section"></vue-droppable>
<vue-draggable tag="main"></vue-draggable>

Empty string:

<vue-draggable-container tag="">
  <div>rendered</div>
  <div>not rendered</div>
</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
<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

Readme

Keywords

none

Package Sidebar

Install

npm i vue-shopify-draggable

Weekly Downloads

60

Version

0.0.3

License

MIT

Unpacked Size

88.5 kB

Total Files

27

Last publish

Collaborators

  • zjffun