https://github.com/p-baleine/vue-draggable-virtual-scroll-list

🔌 SortableJS/Vue.Draggable + ⚡ tangbc/vue-virtual-scroll-list = 💡✨
https://github.com/p-baleine/vue-draggable-virtual-scroll-list

Last synced: 7 days ago
JSON representation

🔌 SortableJS/Vue.Draggable + ⚡ tangbc/vue-virtual-scroll-list = 💡✨

• Host: GitHub
• URL: https://github.com/p-baleine/vue-draggable-virtual-scroll-list
• Owner: p-baleine
• License: mit
• Created: 2020-04-15T15:45:38.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T03:29:57.000Z (almost 2 years ago)
• Last Synced: 2024-10-18T20:49:28.793Z (21 days ago)
• Language: TypeScript
• Homepage:
• Size: 6.16 MB
• Stars: 43
• Watchers: 2
• Forks: 28
• Open Issues: 24
• Metadata Files:
  • Readme: README.org
  • License: LICENSE

Awesome Lists containing this project

README

        
#+TITLE: vue-draggable-virtual-scroll-list

[[https://github.com/p-baleine/vue-draggable-virtual-scroll-list/workflows/CI/badge.svg]]

* Description

🔌 [[https://github.com/SortableJS/Vue.Draggable][SortableJS/Vue.Draggable]] + ⚡ [[https://github.com/tangbc/vue-virtual-scroll-list][tangbc/vue-virtual-scroll-list]] = 💡✨

Vue component who put [[https://github.com/SortableJS/Vue.Draggable][SortableJS/Vue.Draggable]] and

[[https://github.com/tangbc/vue-virtual-scroll-list][tangbc/vue-virtual-scroll-list]] together and allow drag-and-drop and big amount

data list with high scroll performance.

[[images/screenshot.gif]]

* Usage

#+begin_src html



  

  



const Item = {

  props: {

    source: {

      type: Object,

      default () {

        return {}

      },

    },

  },

  template: `

    <div class="phrase" :key="source.id">

      {{ source.content }}

    </div>

  `

}

new Vue({

  el: '#main',

  components: {

    DraggableVirtualList,

  },

  data() {

    return {

      items: [

        { source: { id: 1, content: 'hello' } },

        { source: { id: 2, content: world' } },

        // ...

      ],

      Item

    }

  },

})

#+end_src

Please see [[./example/index.html]].

* License

[[LICENSE][MIT License.]]