0.1.6 • Published 10 months ago

@scalar/draggable v0.1.6

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

Scalar Draggable component

Version Downloads License Discord

Installation

npm install @scalar/draggable

Usage

A complete example can be found the playground, but basically you need a data structure like:

const sidebar = ref({
  // Master list of all items
  items: {
    '1': {
      id: '1',
      name: 'Rangers',
      children: ['2', '4', '5', '6', '7'],
    },
    '2': {
      id: '2',
      name: 'Stars',
      children: ['3'],
    },
    '3': { id: '3', name: 'Bruins', children: [] },
    '4': { id: '4', name: 'Canucks', children: [] },
    '5': { id: '5', name: 'Panthers', children: [] },
    '6': { id: '6', name: 'Avalanche', children: [] },
    '7': { id: '7', name: 'Hurricanes', children: [] },
    '8': { id: '8', name: 'Jets', children: [] },
    '9': { id: '9', name: 'Oilers', children: [] },
    '10': { id: '10', name: 'Predators', children: [] },
    '11': { id: '11', name: 'Maple Leafs', children: [] },
    '12': { id: '12', name: 'Kings', children: [] },
  } satisfies Items,
  // Root level children (the top level of the sidebar)
  children: ['1', '8', '9', '10', '11', '12'],
})

Then you will need a recursive component that wraps Draggable like:

<template>
  <Draggable
    :id="id"
    :ceiling="0.8"
    :floor="0.2"
    :height="30"
    :parentIds="[...parentIds, id]">
    <div
      class="sidebar-item"
      :class="{ 'sidebar-folder': items[id].children.length }">
      {{ items[id].name }}
      <SidebarItem
        v-for="childId in items[id].children"
        :id="childId"
        :key="childId"
        :items="items"
        :parentIds="[...parentIds, id]" />
    </div>
  </Draggable>
</template>

Then manage the data manipluation on drop using the emitted events!

Example

You can find an example in this repo under the playground

0.1.6

10 months ago

0.1.5

11 months ago

0.1.0

1 year ago

0.1.2

1 year ago

0.1.1

1 year ago

0.1.4

1 year ago

0.1.3

1 year ago

0.0.7

1 year ago

0.0.6

1 year ago

0.0.5

1 year ago

0.0.2

1 year ago